How to make the main menu sticky below sticky top bar on scroll | WordPress.org

mzakzok
(@mzakzok)

3 years, 6 months ago

Hi
I made the top bar sticky using a CSS sticky code but I couldn’t do this also for the main menu to be sticky below the sticky top bar ( I think the main menu disappear below the top bar when scrolling), How could I do this?
Thanks:)

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

David
(@diggeddy)

3 years, 6 months ago
Hi there,

you have to adjust the Top position to account for the height of the top bar eg. this CSS:
```
.main-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 113px;
}
```
Thread Starter mzakzok
(@mzakzok)

3 years, 6 months ago

it worked fine
Thank you very much

David
(@diggeddy)

3 years, 6 months ago

You’re welcome

Thread Starter mzakzok
(@mzakzok)

3 years, 6 months ago

Hi again
There is a sudden transition for the menu when scrolling on iPhone, is there a fix for this?

David
(@diggeddy)

3 years, 6 months ago

It looks ok to me – the navigation just sticks below the header on scroll. Its not possible to change that using the CSS i provided.

Thread Starter mzakzok
(@mzakzok)

3 years, 6 months ago

ok, thanks

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘How to make the main menu sticky below sticky top bar on scroll’ is closed to new replies.

In: Themes and Templates
6 replies
2 participants
Last reply from: mzakzok
Last activity: 3 years, 6 months ago
Status: not resolved