Focused Energy May 10, 2018 · 9:55 pm #9670 I recently added a Hello Bar marketing lead capture tool to the top of my website however the banner is cutting off the logo in my header. The support team there said that this means that my header is using a fixed CSS position, which is the same position that Hello Bar uses. I need help with updating my header so that it can be pushed down (not set to a CSS position of fixed or absolute). Can you please send instructions for doing this within the theme header settings? Thanks!
Link to my website so that you can see what is happening: https://focusedenergy.work/
Andrew Misplon Puro May 11, 2018 · 7:52 am #9673 Hi 🙂
Thanks for reaching out. That’s an awesome looking site, nicely done.
The only way to make this change from within Theme Settings would be disable the sticky header. At Theme Settings > Header > Sticky Header.
If you 100% need to keep the sticky header then we’d have to look at adding the top bar manually. In this event, please ask Hello Bar if they have any documentation on inserting their bar manually. I don’t see any at the moment. We’d use one of the action hooks in the theme’s header to insert the bar into a position the theme expects. This is how we handle the WooCommerce notification bar for example.
https://github.com/purothemes/polestar/blob/master/header.php#L29
Focused Energy May 11, 2018 · 5:40 pm #9694 Hi Andrew,
Thank you for your response and help. Hello Bar gave me the following code snippet which I added to my footer to add the bar to my website initially. Does this help at all or do I need to add them for something else?
<script src=”https://my.hellobar.com/371607db0699ed95fe71a87300208af3d03e8fa8.js” type=”text/javascript” charset=”utf-8″ async=”async”></script>
Andrew Misplon Puro May 11, 2018 · 5:49 pm #9697 Hi 🙂
What we’d need to do is stop the plugin from automatically outputting and instead manually insert ourselves. Some plugins offer a setting to disable and then document how to insert with a PHP function or similar. That sort of setup is what we’re after here. We need to choose the location on the page the bar is inserted into.
Focused Energy May 11, 2018 · 8:21 pm #9705 Hello Bar is saying that we are not able to do that and need to adjust the Navigation bar on our end. They say that we will not be able to make any adjustments to the Hello Bar code, as it is a script that pushes the data. Would we be able to make adjustments to the navigation bar code in the CSS in the theme by adding padding to the top of the navigation bar on the website to accommodate for something in that area, such as a Hello Bar? If not, can you let me know what my options are? Thanks!
Andrew Misplon Puro May 11, 2018 · 8:31 pm #9706 The easiest would be to disable the sticky header.
Andrew Misplon Puro May 11, 2018 · 8:36 pm #9707 If the bar is only in use on the home page then you can try in Custom CSS/Additional CSS:
@media (min-width: 769px) {
.home.topbar-out .site-header {
top: 50px;
}
}
I can’t quite see at what resolution the bar stops being outputted, the above might do the trick.
Focused Energy May 11, 2018 · 9:05 pm #9708 The bar shows on all pages not just the home page. I will just disable the sticky header while we are using the bar. Thanks for your help.
Andrew Misplon Puro May 11, 2018 · 9:07 pm #9709 Sounds good 🙂
You can try for all pages:
@media (min-width: 769px) {
.topbar-out .site-header {
top: 50px;
}
}
Focused Energy May 11, 2018 · 9:23 pm #9710 That worked on desktop but I’m still seeing the issue on mobile… is there anything I can do about that?
Andrew Misplon Puro May 11, 2018 · 9:32 pm #9711 You can remove the media query to apply the rule to all resolutions:
.topbar-out .site-header {
top: 50px;
}
Or add additional queries to change the position for different resolutions as required.
Andrew Misplon Puro May 11, 2018 · 9:33 pm #9712 Focused Energy May 11, 2018 · 9:35 pm #9713 Yes that worked! Thank you for all of your help, great customer service.
Andrew Misplon Puro May 11, 2018 · 9:38 pm #9714 Glad that helped 🙂 All the best.