Docs

[brendanduggan11]

Hello, I almost have my Navbar set up on my main page how I like it… but now I need it to be different on my blog. On my main page it is set up to be transparent and when the scroller is at the top and then turn solid white when scrolled down.

For the blog page I would like to have the nav bar be solid at the top of the page and and the color to be black with white text for now.

I have fiddled around quite a bit and can`t seem to get it to work.

Edit: I would also like to remove the bar below the navbar that shows home>blog

wwww.sunshinesalsatours.com

Thank you

[Thai]

Hi There,

Please add the following CSS:

.blog .x-navbar {
    background-color: rgba(255, 255, 255, 0.75) !important;
}

.blog .x-navbar .desktop .x-nav > li > a > span {
    color: #000 !important;
}

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

.blog .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a > span {
    color: #fff !important;
}

.blog .x-breadcrumb-wrap {
    display: none;
}

Hope it helps 🙂

[brendanduggan11]

Thanks, it helped but I would also like to have it for the blog posts as well, not just the main page. Is there a way to do that?

[Lely]

Hi There,

Please update above CSS to this:

.blog .x-navbar,
.single-post .x-navbar {
    background-color: rgba(255, 255, 255, 0.75) !important;
}

.blog .x-navbar .desktop .x-nav > li > a > span,
.single-post .x-navbar .desktop .x-nav > li > a > span{
    color: #000 !important;
}

.blog .x-navbar.x-navbar-fixed-top,
.single-post .x-navbar.x-navbar-fixed-top {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

.blog .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a > span,
.single-post .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a > span {
    color: #fff !important;
}

.blog .x-breadcrumb-wrap,
.single-post .x-breadcrumb-wrap {
    display: none;
}

Hope this helps.

[Author]

Posts