[Support request] can top bar function like sticky navigation

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

[Elvin]

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/

[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;
}
}

[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

[Ying]

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 🙂

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

[Ying]

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?

[Author]

Posts