Adding (sticky) banner before header

[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?

[Elvin]

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.

A wise man once said:
"Have you cleared your cache?"

[Hugo]

Thanks, I’ve added the domain in the private information field.

[Elvin]

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/

A wise man once said:
"Have you cleared your cache?"

[Hugo]

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.

[Elvin]

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).

A wise man once said:
"Have you cleared your cache?"

[Hugo]

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

[Elvin]

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

A wise man once said:
"Have you cleared your cache?"

[Hugo]

This works brilliantly! Thanks for the fantastic support!

[Elvin]

No problem. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts