Transparent header only on home page

[gallagherBD]

Hello, I currently and using some code to have a transparent header for a site I am building. However, I only want that on the home page. Is there a way to make it so it only happens on the home page?

Here is the code I am using:
.x-navbar {
background-color: none !important;
}

Here is the site I am doing this on: http://aztecdemo2.gallagherbd.com/

[jade]

Hi there,

Please go to X > Theme Options > Header > Links – Text : Navbar Links then set it to #007cba.

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

Here are some related links for further reading:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

Hope this helps.

[gallagherBD]

I am not sure this is what I am looking for. I am using Ubermenu so the navbar link color shouldnt matter. Right now, I am using this code but it globally makes the header transparent.
.x-navbar {
background-color: none !important;
}

I only want that on the home page.

[friech]

Hi There,

In that case, add the body class home on your selector so it only affects whichever is set as the homepage.

.home .x-navbar {
	background-color: none !important;
}

Hope it helps,
Cheers!

[gallagherBD]

This is great, any way to make it so it has a white background when you scroll down?

[thai]

Hi @gallagherBD,

Because the text is white, so I suggest you to use the black color instead:

.home .x-navbar.x-navbar-fixed-top {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

Hope it helps