- This topic has 13 replies, 2 voices, and was last updated 6 years, 6 months ago by
.
- Posts
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/
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
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>
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.
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!
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.
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.
Sounds good 🙂
You can try for all pages:
@media (min-width: 769px) { .topbar-out .site-header { top: 50px; } }That worked on desktop but I’m still seeing the issue on mobile… is there anything I can do about that?
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.
You must be logged in to reply to this topic.