- This topic has 13 replies, 2 voices, and was last updated 6 years, 5 months ago by Andrew Misplon.
- AuthorPosts
- May 10, 2018 at 9:55 pm #9670
Focused EnergyParticipantI 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/
May 11, 2018 at 7:52 am #9673
Andrew MisplonKeymasterHi 🙂
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
May 11, 2018 at 5:40 pm #9694
Focused EnergyParticipantHi 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>
May 11, 2018 at 5:49 pm #9697
Andrew MisplonKeymasterHi 🙂
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.
May 11, 2018 at 8:21 pm #9705
Focused EnergyParticipantHello 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!
May 11, 2018 at 8:31 pm #9706
Andrew MisplonKeymasterThe easiest would be to disable the sticky header.
May 11, 2018 at 8:36 pm #9707
Andrew MisplonKeymasterIf 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.
May 11, 2018 at 9:05 pm #9708
Focused EnergyParticipantThe 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.
May 11, 2018 at 9:07 pm #9709
Andrew MisplonKeymasterSounds good 🙂
You can try for all pages:
@media (min-width: 769px) { .topbar-out .site-header { top: 50px; } }
May 11, 2018 at 9:23 pm #9710
Focused EnergyParticipantThat worked on desktop but I’m still seeing the issue on mobile… is there anything I can do about that?
May 11, 2018 at 9:32 pm #9711
Andrew MisplonKeymasterYou 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.
May 11, 2018 at 9:33 pm #9712May 11, 2018 at 9:35 pm #9713
Focused EnergyParticipantYes that worked! Thank you for all of your help, great customer service.
May 11, 2018 at 9:38 pm #9714
Andrew MisplonKeymasterGlad that helped 🙂 All the best.
- AuthorPosts
You must be logged in to reply to this topic.