Docs

[Fulgent]

Hi,

I have my NavBar colour set to a colour (#3399cc) in the Renew section of the customizer

Id like to change the colour of the sub menu drop down boxes from the same colour as the NavBar.

I have tried the following code but it doesnt do what id like it too. (See shot 3 in the attached image)

.x-navbar .sub-menu a{background-color: #fff;}

Shot 2 of the attatched is how it currently looks – id like it reversed – so the blue is white, the white text becomes the same colour as the Navbar – #3399cc – and then changes to the lighter blue when hovered over as it currently does in the NavBar.

Can somebody help me with the CSS to achieve this please as i cant quite nail it.

Here is the rest of my custom CSS

/* Fix wierd Firefox borders issue around Menu items from appearing */

a:focus, select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="submit"]:focus, input[type="checkbox"]:focus {outline: none !important}

/* Shrink Footer size */

.x-colophon.bottom {padding: 0px;} .x-colophon.bottom .x-colophon-content {margin: 0px 0;}

/* Shrink Footer Social Media Icons */

.x-colophon.bottom .x-social-global a {width: 36px; height: 36px; font-size: 18px; line-height: 36px;}

/* Change drop down menu text size */

.x-navbar .sub-menu a{font-size:16px;}

/* Remove underlining of Nav bar menu items */

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
box-shadow: none !important;}

My site is not yet available to the outside world so i cant provide you with a login to it.

Thanks

[Rupok]

Hi there,

Thanks for writing in!

You can use this CSS to change submeu background color :

.x-navbar .sub-menu {
  background-color: #3399cc;
}

Cheers!

[Fulgent]

Hi,

Thanks but that code doesnt change anything on my sub-menu.

I changed the colour code from #3399cc to #fff as i want the background white.

To re-iterate, image 2 in the attached doc – i want that completely reversed as that is pulling the colours set for the main navbar….

1.So the sub menu box to be completely white
2.The Text and seperater lines to be #3399cc
3.The hover text to continue to use the colour set in the renew section of the customizer.

Putting this code in: .x-navbar .sub-menu a{background-color: #fff;}` makes the sub menu look like image 3 in the attached doc which is no good.

Thanks

[Rupok]

Hi there,

Thanks for writing back! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Fulgent]

This reply has been marked as private.

[Thai]

Hi There,

Please try adding the following CSS instead:

.x-navbar .desktop .x-nav > li ul.sub-menu {
    background-color: #fff !important;
}
.x-navbar .desktop .x-nav > li ul.sub-menu li a {
    color: #3399cc
}
.x-navbar .desktop .x-nav > li ul.sub-menu li a:hover {
    color: rgb(137,196,226);
}
.x-navbar .desktop .sub-menu li:before, .x-navbar .desktop .sub-menu li:after {
    background-color: #3399cc !important;
}

Hope it helps 🙂

[Fulgent]

Just the job!

Thanks Thai 🙂

[Rad]

You’re welcome!

[Author]

Posts