Need help? Check out our Support site, then


Changing background color primary navigation menu in Modern News theme

  1. 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: http://s1.wp.com/wp-content/themes/premium/modern-news/images/bg-dark.png

    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):

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

    This is the original CSS: http://s1.wp.com/wp-content/themes/premium/modern-news/style.css?m=1322767711g&minify=false

    Can anyone help me out here?

    Thanks!

    The blog I need help with is aldia.microjuris.com.

  2. 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.

  3. thanks design simply! it worked :)

  4. Yay! :)

    I noticed your header image looks a little fuzzy. Seems the image file you're using is a little over compressed or something? http://noticiasmicrojuris.files.wordpress.com/2012/01/mjheaderaldia.jpg

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

Topic Closed

This topic has been closed to new replies.

About this Topic