Archived topic

Sticky Top Bar AND Main Navigation

3 replies · Started by Matt Stern on January 31, 2019

Viewing posts 1–4 of 4

January 31, 2019 at 10:23 am #797922

Hi Guys,

I'm trying to make both the top bar and the main navigation sticky at this URL:

https://naturespirit.dev.onpressidium.com/.

I've added this bit of code:

/* Makes top bar and primary nav. sticky (disable sticky setting in customizer first) */
.top-bar {
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 99;
}
#site-navigation {
position: -webkit-sticky;
position: sticky;
top: 29px; /* This is the height of the top bar */
}

Sticky Navigation is turned off in the customizer.

What am I missing?

Thanks!

Matt

January 31, 2019 at 10:56 am #797963

Hi there,

Try this instead:
/* Makes top bar and primary nav. sticky (disable sticky setting in customizer first) */

.top-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 99;
}
.site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 29px; /* This is the height of the top bar */
    z-index: 999;
}

Let me know :)

January 31, 2019 at 11:00 am #797967

Worked like a charm. Thanks, Leo.

January 31, 2019 at 11:02 am #797971

No problem :)

This archived topic is closed to new replies.

Start building better websites today.