Changing the responsive dropdown menu background color

Hey there Asli Theobald,

How are you doing today?

Both should be possible to achieve with some custom CSS. Since this theme has it’s own custom CSS tab which is located in Appearance >> Customize >> Advanced Options >> Custom CSS please try adding the following code there:

.navbar .btn-navbar:hover {
background-color: #1b8d71;
}

Replace the color hex value to the one of your choice. This should change the hover color of the hamburger menu button. You can use sites similar to this one to get hex value for the color of your choice:

https://www.color-hex.com/

As for the background color of the dropdown menu please try adding the following CSS code:

@media (max-width: 979px){
.nav-collapse.collapse, .no-navbar .nav-collapse {
background: rgba(255,255,255,.9);
}
}

Replace the color with the color of your choice. You can use hex value colors or if you want to use transparency you can stick with rgba. You can find more info about rgba colors here:

https://www.w3schools.com/cssref/css_colors_legal.asp

If this doesn’t work could you please post link to your site so I can take a look?

Hope this helps ??

Best regards,
Bojan

Dear Bojan,
Thanks a million for your reply, it helped me change the drop-down menu background color successfully :), but still did not work for the drop-down menu link hover gray color. Perhaps I could not clarify what I wanted to do. Do you notice the light gray menu link background on the drop-down when you hover on any of the menu items? I would like to be able to change that to a coordinating color for a truly professional look and feel.
Thanks again for your help and for solving my background problem.
Sincerely,
Asli

Hey again Asli,

Thank you for clarification. The code I provided above should change the hover color of the hamburger menu, see screenshot https://screencast.com/t/W8SkQluj.

I’ve checked the hover color of the menus on smaller resolutions and they are getting transparent background when hovered. To change it please try adding the following:

@media (max-width: 979px) {
.navbar .nav>li>a:focus, .navbar .nav>li>a:hover {
background-color: transparent;
}
}

Replace transparent with the hex value of the color you wish to display when hovered over menu link. Also this will affect menu link hover background color only on resolutions where toggle menu is being used.

Hope this helps ??

Best regards,
Bojan

Thanks again ??

Glad I could help ??

Cheers,
Bojan

Hi there,

I added the following code in the Custom CSS. However nothing changed. I am also not very good at custom CSS code. Here is my website.
https://www.empireconsumerservices.com I am trying to make my menu stand out more.

.navbar .btn-navbar:hover {
background-color: #555562;
}

Hey there Empire2014,

How are you doing today?

It really depends on what you’re trying to do. Are you looking to add background color to whole navigation area, whole header section or just menu items hover background color?

Please let me know.

Best regards,
Bojan

Hi Bojan,

Just menu items hover background color.

Thank you!

Charles

Hi again Charles,

Thanks for the clarification, in that case please try adding the following code to Appearance >> Customize >> Advanced Options >> Custom CSS:

.navbar .nav > li > a:focus, .navbar .nav > li > a:hover {
background-color: #555562;
}

This should add hover background color on your menu items.

Hope this helps ??

Best regards,
Bojan

It worked thank you so much Bojan!

Glad I could help ??

Cheers,
Bojan

Hi Bojan.

I’ve tried to add different codes to my custom CSS, but nothing happens.
I’ve used the codes you put up here and also a few from different forums. Nothing seems to work. Do you have any idea why this is?

I am using responsive.

Thanks in advance,
Victor

Hey there Victor,

Different themes are using different classes for its menu items, if you’re using Responsive theme generally you’d want to open your own thread in the theme sub forum.

With that being said please post link to your site and I’ll try to help with some custom CSS.

Best regards,
Bojan