Can you have true opacity for the top bar without it being overlaid on the nav bar, and for both the top bar and nav bar to stay fixed in place when scrolling down?

Support
#1

Hi, sorry for the long post title, but I couldn’t shorten it!

I’m working on a site and noticed that the top bar isn’t a true opacity, that it is overlaid on the nav bar. I’ve done a work around for this and moved the nav bar down with CSS code, but when I scroll down the page, the nav bar moves to the top of the page instead of staying where it is. I’ve tried to figure out how to get around it but can’t! I hope you can help me out with it!

I’ll put the URL in a secure note as there’s a maintenance page up at the mo and I’ll need to give you access to the admin to view it as the password key thing still isn’t working.

Thanks!

#2

Hi there,

Please update:

.x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top {
    background-color: #ffffff;
    border-bottom: none;
}

to

.x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top {
    background-color: #ffffff;
    border-bottom: none;
    margin-top: 35px;
}

and

.x-navbar-fixed-top-active .x-navbar {
    background-color: transparent;
    border-bottom: none;
}

to

.x-navbar-fixed-top-active .x-navbar {
    background-color: transparent;
    border-bottom: none;
    transition: all 0.3s ease-in;
}

Hope this helps.

#3

That’s fab, thanks!

I appreciate your help!

1 Like
#4