sticky top bar

Hi Alex,

Just to confirm, do you want the top bar and header/navigation both sticky?

If so can you disable the sticky navigation option first?

We will just do it together with CSS.

Let me know :)

I turned off Sticky Navigation and Sticky Header

Hi Alex,

Give this CSS a try:

@media (min-width: 769px) {
.gb-container.gb-container-0081696b, #site-navigation {
    position: fixed;
    width:100%;
    z-index: 2000;
}

#site-navigation {
    top: 34px;
}
.gb-container.gb-container-0081696b {
    top: 0;
}
nav#site-navigation + * {
    margin-top: 114px;
}
}

Let me know :)

Ying,

The desktop and tablet works, mobile is not.

Thanks,
Alex

Right, the CSS was only for desktop and tablet. I wasn't sure if you want them sticky on mobile as well.

Try this CSS for mobile:

@media (max-width: 768px) {
.gb-container.gb-container-0081696b, #mobile-header {
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#mobile-header {
    top: 39px;
}

.gb-container.gb-container-0081696b {
    top: 0;
}

#site-navigation + * {
    margin-top: 95px;
}
}

It is working now.
Thank you very much.

Alex

You are welcome :)