- This topic has 9 replies, 2 voices, and was last updated 4 months ago by
Elvin.
-
AuthorPosts
-
October 27, 2020 at 2:44 pm #1507027
Hugo
Hey guys,
I’ve been trying to add a sticky banner on top of my site’s header.
I found this previous topic: https://generatepress.com/forums/topic/adding-banner-before-header/
Based on that, I created a top bar widget with HTML inside. The banner looks great, the only thing is that I can’t get it to behave sticky.
As soon as the user scrolls, the banner is hidden. How can I get it to keep showing, despite users scrolling down?
I tried adding CSS to the widget class
top:0;
position: fixed;But while this makes it sticky, it also makes it fully cover the original header.
Could you point me in the right direction?
October 27, 2020 at 4:24 pm #1507074Elvin
StaffCustomer SupportHi,
Can you link us to the site you’re working on?
You can provide the site details in the Private Information textarea. Thank you.
A wise man once said:
"Have you cleared your cache?"October 27, 2020 at 4:44 pm #1507082Hugo
Thanks, I’ve added the domain in the private information field.
October 27, 2020 at 6:40 pm #1507122Elvin
StaffCustomer SupportYou can try adding this CSS code:
.top-bar.top-bar-align-center { position: fixed; width: 100%; top: 0; left: 0; z-index: 10000; } @media(min-width:769px){ div.inside-header, nav#sticky-navigation { margin-top: 60px !important; } } @media (max-width: 768px) #mobile-header { display: block !important; width: 100% !important; top: 0px !important; margin-top: 60px !important; }
Here’s how to add CSS – https://docs.generatepress.com/article/adding-css/
A wise man once said:
"Have you cleared your cache?"October 28, 2020 at 6:22 am #1507663Hugo
Thanks for the help! I added it and it works perfectly for desktop and tablet layouts.
However, on mobile, the banner is placed in front of the header, and as a result, my header + navigation is not visible/usable.
October 28, 2020 at 1:14 pm #1508479Elvin
StaffCustomer SupportOh that’s right yeah I forgot about viewports smaller than 600px.
That said, lets changes things a bit and add a few more in on my previous reply. (keep the topbar and the #sticky-navigation from the previous one.)
@media (max-width: 768px) and (min-width:600px){ #mobile-header { display: block !important; width: 100% !important; top: 60px !important; } } @media (max-width: 599px){ #mobile-header { top: 90px !important; } .top-bar.top-bar-align-center { min-height: 90px; display: flex; align-items: center; } } @media (max-width: 339px){ #mobile-header { top: 115px !important; } .top-bar.top-bar-align-center { min-height: 115px; } }
This css adds more settings for the slightly older phones (600px) and the really old ones (320px).
A wise man once said:
"Have you cleared your cache?"October 28, 2020 at 2:47 pm #1508564Hugo
Thanks again! We’re one step closer, although not fully there yet haha.
This one is a bit strange, because, on mobile, my header is not shown when the page is not scrolled (scroll depth = 0%). But as soon as I scroll, then the sticky header shows up as it should. The banner behaves properly this time though!
See example, for scroll depth = 0%: https://i.imgur.com/khNU5sE.png
See example, for scroll depth > 0%: https://i.imgur.com/taTxmD4.pngOctober 28, 2020 at 4:28 pm #1508627Elvin
StaffCustomer Supportdoh, I made a silly typo.
the “top” ones should’ve been “margin-top”.
.top-bar.top-bar-align-center { position: fixed; width: 100%; top: 0; left: 0; z-index: 10000; } @media(min-width:769px){ div.inside-header, nav#sticky-navigation { margin-top: 60px !important; } } @media (max-width: 768px) and (min-width:600px){ #mobile-header { display: block !important; width: 100% !important; margin-top: 60px !important; } } @media (max-width: 599px){ #mobile-header { margin-top: 90px !important; } .top-bar.top-bar-align-center { min-height: 90px; display: flex; align-items: center; } } @media (max-width: 339px){ #mobile-header { margin-top: 115px !important; } .top-bar.top-bar-align-center { min-height: 115px; } }
Adding this code, your header should behave as shown here: https://share.getcloudapp.com/5zuwOobo
A wise man once said:
"Have you cleared your cache?"October 29, 2020 at 1:29 am #1508889Hugo
This works brilliantly! Thanks for the fantastic support!
October 29, 2020 at 12:07 pm #1510039Elvin
StaffCustomer SupportNo problem. 🙂
A wise man once said:
"Have you cleared your cache?" -
AuthorPosts
- You must be logged in to reply to this topic.