menu background

Resolved melza0
(@melza0)

9 years, 1 month ago

hi there. I am trying to change the drop down menu background while on hover to white.

and trying to change the nav menu to a separate colour on hover.

please advise.

Thankyou

Viewing 6 replies - 1 through 6 (of 6 total)

(@weblizar_support)

Hello,

Go to Dashboard -> Appearance -> Customize -> Theme Options -> Theme General Options -> paste below code in Custom CSS box and save –

.navbar-default .navbar-nav > li > a:hover{
    background-color: #8a6d3b !important;
}
.navbar-default .navbar-nav > .active > a {
    background-color: #8a6d3b !important;
}
.dropdown-menu > li > a:hover{
    background-color: #8a6d3b !important;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    background-color: #8a6d3b !important;
}
.dropdown-menu {
    background-color: #8a6d3b !important;
}

You can change the value of background-color as per your requirement.

Thanks.

Thread Starter

melza0

(@melza0)

9 years, 1 month ago

hi there. for some reason that only changed the background colour of the drop down menu. I need the the color on-hover for the navigation menu.

weblizar_support

(@weblizar_support)

9 years, 1 month ago

Please give your site URL.

whitejamesh

(@whitejamesh)

9 years ago

The fix provided isn’t working for me. Here is the url for my site: http://61a.796.myftpupload.com/

I’ve created a child theme and have successfully changed my css with the exception of the menu background color.

All of my new css has been placed in: Dashboard -> Appearance -> Customize -> Theme Options -> Theme General Options

For some reason the menu background color is still showing up as the default color.

whitejamesh

(@whitejamesh)

9 years ago

This is the css I have placed in the custom css box:

/** navbar menus ***/
.navigation_menu{
	background-color: #fff;
	border-top:2px solid #002350 !important;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus,
.dropdown-menu .active a {	
	background-color: #002350;
}
.collapse ul.nav li.current-menu-parent .dropdown-toggle, .collapse ul.nav li.current-menu-item .dropdown-toggle,
.navbar-default .navbar-collapse ul.nav li.current-menu-parent .dropdown-toggle,.navbar-default .navbar-collapse ul.nav li.current-menu-item .dropdown-toggle
.collapse ul.nav li.current_page_ancestor .dropdown-toggle,.collapse ul.nav li.current_page_ancestor .dropdown-toggle,
.navbar-default .navbar-collapse ul.nav li.current_page_ancestor .dropdown-toggle,.navbar-default .navbar-collapse ul.nav li.current_page_ancestor .dropdown-toggle
{
	background-color: #002350 !important;
	box-shadow: 3px 3px 0 rgba(201, 201, 201, 1);
	color: #fff !important;
	border-radius:0px;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
	background-color: #002350 !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	background-color: #002350 !important;
}

.dropdown-menu {
	background-color: #002350 !important;/*rgba(0, 35, 80, 1) !important;*/
}

[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

As you can see, I’ve changed all the background-color settings to use #002350 !important but in my site, they all get overwritten to use #31A3DD

This reply was modified 9 years ago by bdbrown.

whitejamesh

(@whitejamesh)

9 years ago

Thanks for the info…

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘menu background’ is closed to new replies.