Docs

[ZerotoOne]

Hey there,
I’d like to achieve a certain look on my navbar.

1. the navbar should be semi transparent and less wide (see screenshot)
2. the navbar should overlap the first section and not be “masterhead” of the page.(see screenshot)

thanks for your assistance! 🙂

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (min-width:979px){
div#home {
    margin-top: -100px !important;
}
.x-navbar, .x-navbar.x-navbar-fixed-top {
    background-color: rgba(0,0,0,0.3) !important;
}
.x-navbar, .x-navbar.x-navbar-fixed-top {
    background-color: rgba(0,0,0,0.3) !important;
    width: 87%;
    max-width: 87%;
    margin: 0 auto;
}
}

Hope it helps.

[ZerotoOne]

thanks a lot this was perfect!

I saw a post in the forum about customizing the navbar on this site http://springs.church

how can I achieve the same “fly in” navbar with the look of the navbar in the screenshot?

Thank you very much! 🙂

[John Ezra]

Hi there,

Thanks for updating the thread! Just activate the fixed nav option in the customzier.

Appearance > Customize > Header > Navbar Position >> Set to Fixed Top.

Hope this helps – thanks!

[ZerotoOne]

sadly fixed top was already activated.
So let me clarify my problem.

when you scroll down this x theme based page http://springs.church you will notice the the navbar changing colors.
I’d like to have the same effect on my page. I saw a thread in this forum on this topic, but I could not figure it out all by myself 🙂 thank you!

[Darshana]

Hi there,

You can add this under Custom > CSS in the Customizer.

.x-navbar.x-navbar-solid {
    background-color: rgba(0, 0, 0, 0.025);
}

Hope that helps.

[ZerotoOne]

this didn’t do anything 🙁

[Thai]

Hi There,

Please add the following code under Customizer > Custom > Global Javascript:

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 10) {
			$('.x-navbar').addClass('x-navbar-solid');
		} else {
			$('.x-navbar').removeClass('x-navbar-solid');
		}
	});
});

After that add the following CSS under Customizer > Custom > Global CSS:

.x-navbar.x-navbar-solid {
    background-color: rgba(0, 0, 0, 0.025) !important;
}

Hope it helps 🙂

[ZerotoOne]

Thanks a lot, is there a way to style the ‘scrollable’ navbar differently, than the on the top? because id like to minimize the height of the navbar on scroll, so the navbar and the logo have to be fittet separately

[Rue Nel]

Hello There,

To adjust the height of the navbar, you can make use this code:

.x-navbar.x-navbar-solid .x-navbar-inner {
    min-height: 47px;
}

.x-navbar.x-navbar-solid .desktop .x-nav > li > a {
    height: 47px;
    padding-top: 16px;
}

.x-navbar.x-navbar-solid .x-brand {
    margin-top: 0;
}

.x-navbar.x-navbar-solid .x-brand img {
    width: auto !important;
    max-height: 30px
}

Please let us know if this works out for you.

[Author]

Posts