Changing background color primary navigation menu in Modern News theme

  • Author
  • #808597

    I’m having trouble changing the background color for the Primery Navigation Menu in my Modern News theme using Custom CSS.

    I want to change the dark grey color the menu currently has:

    By replacing it with this color: #034C6A

    I tried working the CSS like this (by replacing the background image with a background color but it does not seem to be working— look for #034C6A, which is where I did the replacing):

    /* Primary Navigation
    ------------------------------------------------------------ */

    #nav {
    background-color: #034C6A;
    border-left: 1px solid #d5d5d5;
    border-right: 1px solid #d5d5d5;
    clear: both;
    color: #fff;
    font-family: 'Oswald', arial, serif;
    margin: 0 auto;
    overflow: hidden;
    text-transform: uppercase;
    width: 960px;
    #nav ul {
    float: left;
    width: 100%;
    #nav li {
    float: left;
    list-style-type: none;
    #nav li a {
    color: #fff;
    display: block;
    font-size: 14px;
    padding: 9px 15px;
    position: relative;
    text-decoration: none;
    #nav li a:hover,
    #nav li a:active,
    #nav .current_page_item a,
    #nav .current-cat a,
    #nav .current-menu-item a {
    color: #0094d2;
    #nav li li a,
    #nav li li a:link,
    #nav li li a:visited {
    background-color: #034C6A;
    border: 1px solid #444;
    border-top-width: 0;
    color: #fff;
    font-size: 11px;
    padding: 5px 10px;
    position: relative;
    text-transform: none;
    width: 118px;
    #nav li li a:hover,
    #nav li li a:active {
    color: #0094d2;
    #nav li ul {
    height: auto;
    left: -9999px;
    position: absolute;
    width: 140px;
    z-index: 9999;
    #nav li ul a {
    width: 120px;

    #nav li ul ul {
    margin: -33px 0 0 139px;
    #nav li:hover>ul,
    #nav li.sfHover ul {
    left: auto;

    This is the original CSS:

    Can anyone help me out here?


    The blog I need help with is


    To just change the background color, this should work:

    #nav {
    background: #034C6A;

    The reason your code didn’t work is because background, which is used in the theme’s stylesheet, overrides background-color, which you used in your example. You need to match the specificity of the rule in the theme stylesheet to get it to work. Or, to simplify, use “background” instead of “background-color” in this case because that’s what the theme is using.


    thanks design simply! it worked :)


    Yay! :)

    I noticed your header image looks a little fuzzy. Seems the image file you’re using is a little over compressed or something?

    Can you make it more crisp? I think it would look much nicer if you updated the image.

The topic ‘Changing background color primary navigation menu in Modern News theme’ is closed to new replies.