[Support request] Adding (sticky) banner before header

Home Forums Support Adding (sticky) banner before header

  • This topic has 9 replies, 2 voices, and was last updated 4 months ago by Elvin.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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?

    #1507074
    Elvin
    Staff
    Customer Support

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

    #1507082
    Hugo

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

    #1507122
    Elvin
    Staff
    Customer Support

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

    #1507663
    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.

    #1508479
    Elvin
    Staff
    Customer Support

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

    #1508564
    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

    #1508627
    Elvin
    Staff
    Customer Support

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

    #1508889
    Hugo

    This works brilliantly! Thanks for the fantastic support!

    #1510039
    Elvin
    Staff
    Customer Support

    No problem. 🙂

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.