Change menu bar colour – css code please

  • brightersideofchill · Member ·

    Hi

    Can someone please share the css code for changing the standard “red” menu bar colour to something different please. I am using Premium “Traction” Theme.

    Thanks

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

  • ryadhkaddour · Member ·

    hi,

    how did you change the category and the pages bar?

  • designsimply · Member ·

    First, check the Appearance → Theme Options → Color scheme setting to see if one of the built in color schemes will work for you. @ryadhkaddour, that’s how they changed it to red.

    Changing the color to something custom will take some work. Here is a CSS example you can start with: 

    body.red #main-top,
body.red #main-bottom,
body.red div.feature-top,
body.red div.feature-bottom,
body.red div#cat-nav,
body.red div.feature-sidebar h2 {
	background-image: url("http://s0.wp.com/wp-content/themes/premium/traction/stylesheets/../images/colors/green/sprite-bg.png?m=1340927451i");
}
body.red .nav ul {
    background-image: url(http://s0.wp.com/wp-content/themes/premium/traction/images/colors/green/nav-bottom.png);
}
body.red .nav li li {
	background: #207b1d;
}
body.red .nav li li:hover,
body.red .nav li li.sfhover,
body.red .nav li li.current_page_parent,
body.red .nav li li.current_page_ancestor,
body.red .nav li li.current-cat-parent,
body.red .nav li li.current-cat,
body.red .nav li li.current_page_item {
	background: #1b6b19;
}
body.red div#feature {
	background-image: url(http://s0.wp.com/wp-content/themes/premium/traction/images/colors/green/feature-body.png);
}
body.red .nav a {
	color: #c04d4d;
}

    Copy each url() value, save the corresponding image, recreate a new image with the colors you want, upload the new image you created to your media library, copy the link URL, replace the url() value for the image in the CSS example above with the link URL of your custom image.

    Also note that the example above uses “body.red” and that means it depends on the theme using the red color scheme option. If you change the color scheme in the theme options, you will also need to update the “body.red” CSS rule to match.

  • The topic ‘Change menu bar colour – css code please’ is closed to new replies.