Navbar boxed

[danatennyson]

I would like to make my navbar boxed with a red background and hover background white like it does here: https://livedemo00.template-help.com/ The website I am trying to do this with is http://new2018.pves.org/

[nico]

Hi @danatennyson,

Thanks for writing in.

The link that you shared does not show anything.

https://livedemo00.template-help.com/

You could use this code below to add background color to your navbar. To be added in your Custom CSS:

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a{
    background: #000;
} 

Let us know how it goes.

Thanks.

[danatennyson]

I’m sorry - I didn’t send the complete URL. The red I will be using is #b83233.

[danatennyson]

The URL is https://livedemo00.template-help.com/wt_53642/index.html

[jade]

Hi there,

Please try this code:

.x-navbar-inner .x-container {
    background-color: #b83233;
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    background: #fff;
    color: #000;
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: inset 0 4px 0 0 #1e1e1e;
}

---

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

[danatennyson]

That worked! Thank you!

[jade]

You’re most welcome.