Transparent Navigation Bar

Hi, I am looking to make the website navigation bar transparent when entering the website then after scrolling it becomes a solid color. Example: https://www.maf.nl/

Also how can I get an image to be like on that website from the top to the bottom of the screen?

Thank you!

Hi There,

It could be done with the custom CSS. Please add the following CSS under X > Theme Options > CSS:

.home .x-navbar {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.home .masthead.masthead-inline {
    position: absolute;
    width: 100%;
}

.home .x-navbar.x-navbar-fixed-top {
    background-color: rgba(84, 84, 84, 0.5);
}
.home .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    color: #fff;
}

You can try with the Revolution Slider plugin. Create a slider with image then set the slider layout to Full Screen:

Hope it helps :slight_smile:

When going on mobile the navigation doesn’t work. Every time I click the menu button nothing happens. How can I fix that

Hi there,

You are using the latest version of X but your Cornerstone version is outdated.

Kindly update X to the latest version as well to fix this issue.

Thank you.

My test site is site305.com, the cornerstone version is 2.0.6

Hi there,

The latest version of Cornerstone is 3.0.4.

Kindly update your Cornerstone version as it is quite outdated and is causing conflict since you are using X 6.0.4.

How can I make the navigation bar become solid background color after scrolling 200px down. But when getting into the 0-199px range back to transparent.

Hi there,

By default. this could be done by the current setup of X, except that it will not cater to your specification about having the solid background set to the header after scrolling 200px down.

Try adding this code to the Global JS panel:

jQuery(function($){

	$(window).scroll(function(){

		if( $(this).scrollTop() == 0 ) {
			$('.x-navbar-fixed-top').removeClass('x-navbar-fixed-top');
		}

	});

});

This will remove the class x-navbar-fixed-top (when you scroll to the top of the page) to the header area which adds the solid color to the header. Therefore, making the header have a transparent background when you scroll back up.

If you really want to specifically have the solid background for 200px down, you will have to write some JS code that will detect how far you have scrolled from the top and add a class to the navigation bar container when it reaches the point that you have indicated then also write the CSS code that will control.

Hope this helps.

I am trying to change the navigation bar text color, i’ve added "color: white; and it doesn’t work.

    .home .x-navbar {
  	color:white; <-----------------------HERE DOESN'T WORK
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.home .masthead.masthead-inline {
    position: absolute;
    width: 100%;
}

.home .x-navbar.x-navbar-fixed-top {
    background-color: white;
}
.home .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    color: black;
}

Hey There,

The code will not work.

.home .x-navbar {
  	color:white; <-----------------------HERE DOESN'T WORK
    background-color: transparent;
    border: none;
    box-shadow: none;
}

because within the .x-navbar elements, there are other elements and they have a different css styling that sets the colors as well. You can force the color by adding !important to it. You can make use this code instead:

.home .x-navbar {
    color: white !important;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

Hope this helps.

That didn’t work the text is still grey. Website: site305.com, it’s the homepage.

Hi there,

If you want to change the color of the menu items, you do not need to add some custom CSS for that since there is already an option in the Theme Options to do that.

Please go to X > Theme Options > Header > Links – Text then set Navbar Links to the color that you want. You may also change the black hover text you currently have from there.

Hope this helps.

Well I want to change the color on just the homepage not every page. That is why I needed the code.

Hi there,

I see. In that case, it should be:

.home .x-navbar .desktop .x-nav > li > a {
    color: #fff;
}

.home .x-navbar .desktop .x-nav > li > a:hover {
    color: #fff;
}

The code you have added did not work because you are setting the text color to the container which is .home .x-navbar but there is another code that is more specific to the menu elements which is set from the Theme Options that gets the priority, so using the selector .home .x-navbar .desktop .x-nav > li > a should work.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.