Archived topic

Sticky Topbar and sticky nav

5 replies · Started by Petri on July 30, 2021

Viewing posts 1–6 of 6

July 30, 2021 at 5:36 am #1876992

Hi Support,

I'm using the Pivot theme and added a topbar widget.

I want the topbar and the primary navigation to be sticky.

- I added this css for the topbar to be sticky:
.top-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.admin-bar .top-bar {
top: 32px;
}

- And turned on Sticky navigation in the customizer.

But now when scrolling down the sticky navbar is displayed over the topbar...

Thank you for having a look (please see the URL in the private field)

July 30, 2021 at 7:42 am #1877134

Hi there,

try adding this CSS to create space for your Top Bar and to stop the sticky nav from overlapping the top bar:

.header-wrap .site-header {
    margin-top: 49px;
}

#sticky-navigation {
    top: 49px !important;
}

July 30, 2021 at 8:18 am #1877391

Hi David,

Thank you, this works fine on large screens.
However on tablet (portrait) and mobile I no longer see the mobile navigation (hamburger) anywhere...

July 30, 2021 at 11:01 am #1877563

Try this CSS:

#mobile-header {
    margin-top: 48px;
}

July 30, 2021 at 11:51 am #1877616

Thanks Leo, that seems to work!

July 30, 2021 at 11:52 am #1877619

No problem :)

This archived topic is closed to new replies.