Docs

[eitanshavit]

Hi,

My top nav is hidden, and I’m using only the main menu (fixed) with Ethos stack.
Currently menu background is black when on top and when I start scrolling.
I would like the menu BG to be transparent, and when I start scrolling, bg becomes black.
I think Icon stack has a similar behavior, but couldn’t find my way around the css files…

Can you help?

Thanks,

Eitan

[Rahul]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[eitanshavit]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thank you for providing the credentials. Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.x-navbar-fixed-top, .x-navbar').css("background-color", "#000");
	var navbar_height = $(".x-navbar").height();
	$(window).scroll(function(){
		if ($(this).scrollTop() > navbar_height) {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: transparent !important');
		} else {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: #000 !important');
		}
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[eitanshavit]

Thanks!
Almost there 🙂
I wanted it to start transparent, and when scrolled down, it turns to black.

Is this possible?
Tried to change the code, but it didn’t work….

Thanks again.

[Nabeel A]

Hi again,

Please replace the previous code with this:

jQuery(document).ready(function($){
	$('.x-navbar-fixed-top, .x-navbar').css("background-color", "transparent");
	var navbar_height = $(".x-navbar").height();
	$(window).scroll(function(){
		if ($(this).scrollTop() > navbar_height) {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: #000 !important');
		} else {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: transparent !important');
		}
	});
});

Let us know how this goes!

[eitanshavit]

No. Tried that.
It starts black, goes to transparent for a second and then back to black…

[Rue Nel]

Hello There,

Thanks for updating in! Do you want something like this, http://prntscr.com/e6ej19 ?

If that is the case, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-navbar {
    margin-bottom: 0;
    border: none;
}

.page-id-6622.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0;
}

We would loved to know if this has work for you. Thank you.

[eitanshavit]

YES!
Thank you!
I guess I’ll need to add this code to every page with its own page ID…
Unless there’s a global class to use.

Thanks again,

Eitan

[Rahul]

Glad we were able to help you.

Feel free to ask us again.

Thanks!

[Author]

Posts