Transparent Navbar on Homepage, White on the rest

Support
#1

hey there,

i have a transparent (static top) navbar on my homepage. the font colour is white. Is there a way to have a white navbar with a different font colour rgb(67,79,91) on all my other pages? my page backgrounds on all pages is white so currently the menu is invisible.

TIA

#2

Hi There,

Please add the following CSS to Theme Options CSS

.home .x-navbar  {
background-color: transparent;
}

.home .x-navbar .desktop .x-nav > li > a > span {
color: white;
}

.x-navbar  {
background-color: white;
}

.x-navbar .desktop .x-nav > li > a > span {
 
color: red;
}

Hope it helps!

#3

almost what i wanted. for some reason though it looks like this.

i would like the navbar to be white in a container so that the actual page content starts below. like in this image. the red box implies the container of the navbar.

#4

Hi,

To fix the overlapping in internal pages, I went ahead and change the css code that reads.

.masthead {
    height:0px;
}

with this

.home .masthead {
height:0px;
}

Kindly check in your end.

Thanks

#5

perfect. just one last question. i have a logo image in the top left corner in the navbar. the text is white.
now that i have a transparent navbar on home it works. but i on the other pages the background of the navbar is white.

is it possible to set a different image with black text for the navbar on those pages?

#6

Hi There,

Please also add this custom CSS:

body:not(.home) .x-brand img {
    opacity: 0;
}
body:not(.home) .x-brand {
    background: url(http://via.placeholder.com/800x350) no-repeat center center;
    background-size: cover;
}

Replace the http://via.placeholder.com/800x350 image with your black logo.

Regards!

#7

boom. awesome. you rock. thanks!

#8

You’re most welcome.

#9

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