Demo5 – How to change background color from menu options

[joaotostes]

Hello there. I'm using demo5 and I'm trying to have the colors this way: Theme primary color is: #e2702c When I use that, the activated menu at the time get this color, the font is white. Other options are white color with black or gray color, that's fine to me. But submenu navigation gives me the same color at brackground: #e2702c I've adjusted it inside Header > Submenu navigation Background color If I want to use white as the color of the menus, I can add there the #fff, ok, but the text inside the menu got #e2702c, so it's a bad color there. I want to have the submenu navigation white (Ok, I know how to do this), the same to the text links (submenu options) background (that one I couldn't find a way). Once everything is white, may I have a black (or gray, I can't see it exactly) link, and when I hover, the color #e2702c. That's exactly like the main menu works. I want to apply it to the submenu. Here's a image what I have now:   This is what I know how to do:   And here what I want to do (at right): Can you please help me? Thank you so much.

[Skywalker [ ex VibeThemes]]

Go to wp-admin->appearance->customiser->add custom CSS-> add these lines and save.   header.standard nav .sub-menu li a:hover, header.standard nav .sub-menu li:hover a, header.standard nav>.menu>li.current-menu-item>a, header.standard nav>.menu>li.current_page_item>a { color: #020202 !important; }   nav .menu li>.sub-menu li a, nav .menu li.current-menu-item .sub-menu li a, nav .sub-menu li.current-menu-item a, nav .menu li .menu-sidebar .widget h4.widget_title, nav .menu li .menu-sidebar .widget ul li a, nav .menu li .menu-sidebar .widget, .megadrop .menu-sidebar, #mooc_menu nav .menu li:hover>.menu-sidebar, #mooc_menu nav .menu li:hover>.menu-sidebar a, .megadrop .menu-sidebar .widget ul li a, .megadrop .menu-sidebar .widget .widgettitle, .megadrop .menu-sidebar .widgettitle, .sleek .woocart .cart_list.product_list_widget .mini_cart_item a, .sleek .woocart .cart_list.product_list_widget .mini_cart_item span, .sleek .woocart .total, .sleek .woocart .cart_list.product_list_widget .empty, .mooc .woocart .cart_list.product_list_widget .mini_cart_item a, .mooc .woocart .cart_list.product_list_widget .mini_cart_item span, .mooc .woocart .total, .sleek .woocart .cart_list.product_list_widget .empty { color: #171717 !important; }

[joaotostes]

Thanks for your kindly answer. I have two problems right now. The first one is that the colors are ok, when I mouse over the menu, but if I move my mouse to the submenu, it change the colors. Here's a pic when I mouse over the menu (mouse is over "Nossos cursos"): Now, here's a pic when I mouse over the sub menu:   So, I need the background behind the text (like All Instructor, Members Only...) to continue white, and the text gets orange, like the menu. The other problem I have is that when I add some custom css, it doesn't permit to save. I click to save and it shows again: Save and publish. It's not saving. May I need to add the custom code to some file inside my ftp? Thank you so much again.

[Skywalker [ ex VibeThemes]]

.menu-main-container ul li a:hover {background-color:#fbfbfb !Important} add this css too.

[joaotostes]

Hello, thank you. The code didn't take any effect to me. I tried to add "background-color" below color: #171717, and it worked for the background, but not to the font color and not to customized menus. The code I have right now is: #scrolltop a{color:#fff !important;} .gallery.columns4>a { height: 200px;overflow: hidden;}header #trigger { top: 28px; right: 40px; }.dash-widget{border:1px solid rgba(0,0,0,0.08);}#trigger{padding: 10px;margin-top:-10px;}   header.standard nav .sub-menu li a:hover, header.standard nav .sub-menu li:hover a, header.standard nav>.menu>li#scrolltop a{color:#fff !important;} .gallery.columns4>a { height: 200px;overflow: hidden;}header #trigger { top: 28px; right: 40px; }.dash-widget{border:1px solid rgba(0,0,0,0.08);}#trigger{padding: 10px;margin-top:-10px;}.current-menu-item>a, header.standard nav>.menu>li.current_page_item>a { color: #020202 !important; }   nav .menu li>.sub-menu li a, nav .menu li.current-menu-item .sub-menu li a, nav .sub-menu li.current-menu-item a, nav .menu li .menu-sidebar .widget h4.widget_title, nav .menu li .menu-sidebar .widget ul li a, nav .menu li .menu-sidebar .widget, .megadrop .menu-sidebar, #mooc_menu nav .menu li:hover>.menu-sidebar, #mooc_menu nav .menu li:hover>.menu-sidebar a, .megadrop .menu-sidebar .widget ul li a, .megadrop .menu-sidebar .widget .widgettitle, .megadrop .menu-sidebar .widgettitle, .sleek .woocart .cart_list.product_list_widget .mini_cart_item a, .sleek .woocart .cart_list.product_list_widget .mini_cart_item span, .sleek .woocart .total, .sleek .woocart .cart_list.product_list_widget .empty, .mooc .woocart .cart_list.product_list_widget .mini_cart_item a, .mooc .woocart .cart_list.product_list_widget .mini_cart_item span, .mooc .woocart .total, .sleek .woocart .cart_list.product_list_widget .empty {   color: #171717 !important;   }     nav .menu li>.sub-menu li a, nav .menu li.current-menu-item .sub-menu li a, nav .sub-menu li.current-menu-item a, nav .menu li .menu-sidebar .widget h4.widget_title, nav .menu li .menu-sidebar .widget ul li a, nav .menu li .menu-sidebar .widget, .megadrop .menu-sidebar, #mooc_menu nav .menu li:hover>.menu-sidebar, #mooc_menu nav .menu li:hover>.menu-sidebar a, .megadrop .menu-sidebar .widget ul li a, .megadrop .menu-sidebar .widget .widgettitle, .megadrop .menu-sidebar .widgettitle, .sleek .woocart .cart_list.product_list_widget .mini_cart_item a, .sleek .woocart .cart_list.product_list_widget .mini_cart_item span, .sleek .woocart .total, .sleek .woocart .cart_list.product_list_widget .empty, .mooc .woocart .cart_list.product_list_widget .mini_cart_item a, .mooc .woocart .cart_list.product_list_widget .mini_cart_item span, .mooc .woocart .total, .sleek .woocart .cart_list.product_list_widget .empty {   color: #171717 !important; background-color: #ffffff !important;   }       Using background-color: #ffffff !important; below color: #171717 !important;, it looks like: What I need here: The link to turn orange when I mouse over   A custom menu doesn't work. Please take a look: I'll give you the credentials to my site. Please help me. Everything I need at submenus is that it works like the main menu. Thank you.

[joaotostes]

This reply has been marked as private.

[joaotostes]

I solved the second problem (the last menu). My problem right now is only the mouse hover to get it orange instead of black inside the sub menu. Just like the main menu. Thanks!

[Skywalker [ ex VibeThemes]]

[Author]

Posts