Need help? Check out our Support site, then


change sub navigation background color

  1. Hello, could anybody provide css code to change subnavigation background and letter colors? Theme: opti. Website: healingcycles.net
    Thank you

    The blog I need help with is healingcyclesblog.wordpress.com.

  2. This thread will be moved to the CSS Forum for you where you can get the help you need.

  3. The blog you selected when you created your help request is using the Neat! theme:
    http://healingcyclesblog.wordpress.com/

    Could you please provide a link to the blog you're working on and point out an example of a submenu item you're trying to change?

  4. Hello and thank you for the answer. My blog is healingcycles.net. That's the one i need help with. The theme is Opti

  5. That was the first part of my question, but I see more than one type of submenu, so I need to know which one you're trying to adjust. For example, there are submenus under "CHI KUNG" or there is a second menu that starts with "About Yamin."

  6. Hello again. I would like to have control over the sub-menus on the grey area (About Yamin, Goddess Wkshps...). The roll down function on those shows black background like those in the menu (acupuncture, Chi Kung, etc). Is there a way to work on each independently?

    Thank you for your support!

  7. Yes, you can work on each menu independently.

    The first best solution to use to change colors is by using the Custom Colors tool found in your Appearance → Themes → Customize → Colors panel. If you'd like to get more fine-grained control, you can use CSS, but note that how much code is needed to edit menu colors varies by theme. To look up what CSS to use, you can right-click on a menu element and select the "Inspect Element" option. You should be able to follow the HTML hierarchy back up until you find the main menu container. Then, you should be able to see all of the CSS that applies to the selected HTML element on the right. If you click one of the CSS source names, you should see the related CSS pop up. That is what I did to find the following color-related CSS for the Opti theme. The following examples are pretty comprehensive, and you should be able to experiment with them and cut some parts out if you don't want to change every color.

    Here is the CSS for the top menu, or primary navigation:

    #nav-primary,
    .custom-colors #nav-primary,
    .nav ul,
    .custom-colors .nav ul,
    .nav ul li a,
    .custom-colors .nav ul li a {
    	background: #191970;
    }
    #nav-primary,
    .custom-colors #nav-primary,
    .nav ul,
    .custom-colors .nav ul {
    	border-color: #191970;
    }
    #nav-primary li,
    .custom-colors #nav-primary li {
    	border-right-color: #191970;
    }
    #nav-primary li,
    .custom-colors #nav-primary li {
    	border-left-color: #191970;
    }
    .custom-colors #nav-primary .current-menu-item,
    .custom-colors #nav-primary li:hover,
    .custom-colors #nav-primary li.current-cat,
    .nav ul li a:hover,
    .custom-colors .nav ul li a:hover {
    	background-color: #191970;
    }
    header input.searchfield,
    .custom-colors header input.searchfield {
    	background-color: #191970;
    }
    header .searchfield:focus,
    header .searchfield:hover,
    .custom-colors header .searchfield:focus,
    .custom-colors header .searchfield:hover {
    	background-color: #191970;
    }
    #nav-primary {
    	background-color: #191970;
    }
    #nav-primary a,
    .custom-colors #nav-primary a,
    #nav-primary .current-menu-item > a,
    #nav-primary .current-cat > a,
    .custom-colors #nav-primary .current-menu-item > a,
    .custom-colors #nav-primary .current-cat > a {
    	color: #e0ffff;
    }
    #nav-primary .current-menu-item > a,
    #nav-primary .current-cat > a,
    .custom-colors #nav-primary .current-menu-item > a,
    .custom-colors #nav-primary .current-cat > a {
    	border-color: #e0ffff;
    }
    #nav-primary li:hover,
    #nav-primary li.current-cat {
    	color: #e0ffff;
    }
    #nav-primary .current-menu-item {
    	color: #e0ffff;
    }

    I used a dark blue for the background and a very light blue for the text in this example. You can replace the color codes as needed.

    Here is an example for the 2nd menu, or lower navigation:

    .menu#nav-lower {
    	background: #fffff0;
    	background: -moz-linear-gradient(top, #fffff0 0%, #faf0e6 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffff0), color-stop(100%,#faf0e6));
    	background: -webkit-linear-gradient(top, #fffff0 0%,#faf0e6 100%);
    	background: -o-linear-gradient(top, #fffff0 0%,#faf0e6 100%);
    	background: -ms-linear-gradient(top, #fffff0 0%,#faf0e6 100%);
    	background: linear-gradient(top, #fffff0 0%,#faf0e6 100%);
    	border-bottom: 1px solid #b0c4de;
    }
    #nav-lower li a {
    	color: #708090;
    }
    #nav-lower .nav > li:hover {
    	background-color: #faebd7;
    }

    I used light beige colors in this example. You can replace the color codes as needed.

  8. Thank you so much! This was the most helpful tip I've ever had! It works!

  9. Yay !

Topic Closed

This topic has been closed to new replies.

About this Topic