Docs

[Happy Cow]

Building the site here: https://celebration-church.ucgsynk2-liquidwebsites.com/

I want the navbar to scroll up off the page when I scroll down. I’ve tried both static and fixed settings in the customizer. Not sure which setting is supposed to do that. Neither is working. It’s perfect as is, just need it to leave the page when I scroll. Just like this: http://elevationchurch.org/

Here is the custom css I’m using:

.x-navbar {
position: fixed !important;
width: 100%;
background: transparent;
border-bottom: 0;
box-shadow:none;
}

.x-slider-container.below {
margin-top: -75px;
}

What am I missing?

Thanks!
Shaun

[Happy Cow]

i think i just got it.

i changed position to absolute.

so now i have:

.x-navbar {
position: fixed !important;
width: 100%;
background: transparent;
border-bottom: 0;
box-shadow:none;
}

.x-slider-container.below {
margin-top: -75px;
}

Is this good? Do I need all that? It’s working as is, but would like to delete custom css that is not needed.

Thanks!
Shaun

[Rupok]

Hi Shaun,

If you use “Static Top” then it works same as the absolute positioning so you don’t need to add custom CSS. For sticky Navbar, you should set “Fixed Top”. However you need more content on your page to see the effect as it doesn’t have enough content to scroll.

Cheers!

[Happy Cow]

i set it to static in customizer, but it did not work. cleared cache as well. that’s why i went the custom css route. no matter what i did, it was always fixed. even when i changed it to static in the custom css. the only way i got it to work was to set it to absolute.

it’s working now as is. i’ll just roll with it.

thanks!
shaun

[Rupok]

Hi Shaun,

Thanks for updating. If you see it’s sticky even after setting as “Static Top” then some of your CSS causing this. However if you are all set right now, you can leave it.

Cheers!

[Happy Cow]

the only css i’m using is what i posted above. from what i posted, what is causing it?

[Rupok]

Hi there,

Obviously that was causing as it have position: fixed !important; and looks like you intentionally did it to make it fixed. You are not supposed to set any positioning with CSS.

Thanks!

[Author]

Posts