ABLE Theme costumize MENU

  • Unknown's avatar
    emilietommerberg · Member ·

    Hi!
    I would like to remove the grey background in the menu bar, and make it white. I’m using the Able Theme. Can someone help me with a CSS code?

    Thanks :)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    I would like to remove the grey background in the menu bar, and make it white. I’m using the Able Theme.

    There are actually quite a few color rules setup for the menu in the Able theme. To change all the background colors to white, add this to your Appearance → Custom Design → CSS editor:

    .main-navigation, .menu-toggle {
	background: white;
}

.main-navigation a:focus,
.main-navigation li:hover > a,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
	color: #888;
}

.main-navigation ul ul,
.main-navigation a:focus,
.main-navigation li:hover > a,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation li li:hover > a,
.main-navigation li li a:hover,
.main-navigation li .current-menu-item > a,
.main-navigation li .current-menu-ancestor > a,
.main-navigation li .current_page_item > a,
.main-navigation li .current_page_ancestor > a,
.main-small-navigation li a,
.main-small-navigation li li a,
.main-small-navigation li li li a {
	background: inherit;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-ms-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
}

    The first rule sets the main background color, the 2nd rule sets the current link color and the hover link color, and the 3rd rule makes everything that follows inherit the main background color and removes shadows.

  • The topic ‘ABLE Theme costumize MENU’ is closed to new replies.