Docs

[brendanduggan11]

Hello, I have been searching the forums and working for hours but I can`t seem to get my Nav Bar to function how I want it.

My site is http://www.sunshinesalsatours.com

I am wanting the nav bar to be transparent at the top of the screen then the backgound darkens as you scroll down. I have gotten it to work fairly well on the lap top but on mobile it is not functioning properly.

1) In mobile verticle (Ex:1) the slider is pushed up to the top underneath the menu and when I touch the menu button it pushes everything down and the text is unreadable (ex2).

I would like the slider to be up against the bottom of the menu so we can see the whole thing and when the menu is activated it will be pushed down again so we can see it.

2) In mobile horizontal it looks fine (ex3) but when I push the button it does this as so (ex4) with the dropdown coming down transparent over the slider. I would like a solid background for the drop down as well as pushing the slider down to the bottom of the drop down menu.

3) As well the I would like the navbar fixed to the top on mobile as well. It is not fixed in neither the vertical nor horizontal.

Thank you very much for your help.

[brendanduggan11]

The next 2 examples.

Thank you

[Rue Nel]

Hello There,

Thanks for writing in! To have a transparent navbar and then a solid color as you scroll down the page, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

jQuery(document).ready(function($){
  $(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
	$('.x-navbar').css("background-color", "rgba(255,255,255,0.75");
	$( '.x-navbar' ).addClass( 'shadow' );
    } else {
	$('.x-navbar').css("background-color", "rgba(255,255,255,0.0");
	$( '.x-navbar' ).removeClass( 'shadow' );
    }
  });
});

We will just resolve #1, #2 and #3 once you are satisfied with the navbar transparency.

Please let us know how it goes.

[brendanduggan11]

That worked great but it still leaves a faint border line. Is there some way to remove that?

Thank you.

[Friech]

Hi There,

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

.x-navbar {box-shadow: none !important;}

Thanks.

[Author]

Posts