Archived topic
Adding (sticky) banner before header
9 replies · Started by Hugo on October 27, 2020
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?
Hi,
Can you link us to the site you're working on?
You can provide the site details in the Private Information textarea. Thank you.
Thanks, I've added the domain in the private information field.
You 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/
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.
Oh 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).
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.png
doh, 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
This works brilliantly! Thanks for the fantastic support!
No problem. :)
