[Support request] can top bar function like sticky navigation

Home Forums Support [Support request] can top bar function like sticky navigation

Home Forums Support can top bar function like sticky navigation

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2020595
    Cynthia

    I have a top bar with a button and a phone # where the hamburger menu is to the left appearing inside the top bar on mobile view. can top bar function like sticky navigation somehow so that it stays visible when scrolling down?

    I have the sticky menu activated on mobile, but only the hamburger stays visible when scrolling.

    #2020660
    Elvin
    Staff
    Customer Support

    Hi Cynthia,

    Try adding this CSS:

    @media (max-width:768px){
        .top-bar.top-bar-align-right {
            position: fixed; 
            top: 0;
            width: 100%;
            z-index: 50;
        }
    
        header#masthead {
            margin-top: 50px;
        }
    }

    Here’s how to add CSS – https://docs.generatepress.com/article/adding-css/

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

    #2022859
    Cynthia

    Hi Elvin

    That css worked however I have 2 hamburgers now. How can I delete one of them?

    I have this css there originally:


    @media
    (max-width: 768px) {
    button.menu-toggle {
    position: fixed;
    left: -5px;
    top: -5px;
    text-align: left;
    font-size:20px;
    color:#ffffff;
    }
    }

    #2022861
    Cynthia

    Also – although the css you gave me appeared to work while I was looking at it on the preview via the customize panel, I just checked on my phone (Android) and the top bar doesn’t fully show when I scroll down. I can only see like 30% of it.

    Which part of the css should I adjust?

    Thank you

    #2024559
    Ying
    Staff
    Customer Support

    Hi Cynthia,

    You can try adjust the topvalue of that CSS to reposition the topbar.

    That css worked however I have 2 hamburgers now. How can I delete one of them?

    Do you have sticky navigation enabled on mobile? If so, can you try disable it?

    Let me know 🙂

    #2025079
    Cynthia

    Adjusting the top won’t work because then it positions the top bar lower. I disabled sticky navigation but that didn’t seem to do anything either. Hmmm.

    the sticky top bar effect appears to work fine in the preview via the customize panel (mobile view) on my laptop, but does not behave the same on my actual phone. You can see for yourself. Access is provided below.

    #2025242
    Ying
    Staff
    Customer Support

    After deactivating the sticky navigation, your top bar is working normally on my phone right now.

    Have you cleared your browser cache of your mobile device?

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