Docs

[hjzhao]

Is there any way to have my navbar “transparent” on my homepage but with a white background on all my other pages?

This is the custom CSS i found in this forum that I used –

.x-navbar {
background-color: transparent !important;
border: 0;
}
.x-logobar{
background-color: transparent !important;
}

.masthead {
height:0px;
}

But I’d like to keep the nav bar on my other pages the same as it was before, like the image attached. Thanks!

[hjzhao]

apparently the image exceeds the allowed file size. But I think you know what I mean. Like a white fixed background for the navbar as opposed to transparent. Thanks!

[Jade]

Hi there,

Please try this code in the customizer:

.home .x-navbar {
    background-color: transparent !important;
    border: 0;
}

.x-navbar {
    background-color: #fff !important;
}

Hope this helps.

[hjzhao]

Thankyou! is there any way to change the font color on the navbar for the homepage but not the other pages? Thanks!

[Rupok]

Hi there,

You can use this :

.home .x-navbar .x-nav-wrap .x-nav > li > a {
  color: #000;
}

Let’s use your own color code.

Cheers!

[hjzhao]

Thanks! Is there any way to just change the color of the font when you hover over it?

[Friech]

Hi There,

In that case update the given css code to:

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

If this does not work, please provide us the site URL.

Thanks.

[hjzhao]

This reply has been marked as private.

[Christopher]

Hi there,

Find and remove this code :

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

And add this code :

.x-navbar .desktop .x-nav > .current-menu-item > a {
    color: #EE1C66;
}

Hope it helps.

[hjzhao]

Thankyou! I actually had to keep both lines of code in order for it to work!

[Rad]

Glad to hear that and you’re welcome!

[Author]

Posts