Need help? Check out our Support site, then


How to change the style and the color of the menu bar

  1. Hi you all. I am currently running a website http://vlogazul.com/ and I want to change the style and the color of the menu to the same color as the background with the letters being white but I dont know how to do it since am not familiar with CSS. I would appreciate any help possible.

    The blog I need help with is vlogazul.com.

  2. I checked http://vlogazul.com/ and I see you are currently using the Forever team. Here is a CSS snippet that will change all of the colors in the menu for that theme.

    #access {
    	background: #002e40;
    }
    #access {
    	border: 3px double #002e40;
    }
    #access a {
    	color: #fff;
    }
    #access ul ul {
    	background: #fff;
    }
    #access ul ul a {
    	border: none;
    	color: #002e40;
    }
    #access li.current_page_item a,
    #access li.current-menu-item a {
    	background: #eee;
    	color: #777;
    }
    #access li.current_page_item ul a,
    #access li.current-menu-item ul a,
    #access ul ul li.current_page_item a,
    #access ul ul li.current-menu-item a {
    	background: transparent;
    	color: #002e40;
    }
    #page #access li:hover > a {
    	background: #fff;
    	color: #777;
    }

    You should take this example, adjust the color codes to your liking, and paste it into the Appearance > Customize > CSS panel in your blog dashboard.

  3. i already visited the color codes and i liked #021824. The only question i have is from the code you gave me, where should i copy that color code that i just liked in order for me to get that chosen color into the menu bar. Am not familiar with CSS

  4. You will most likely want to replace #002e40 with #021824 in the example.

    Keep in mind the example is something that I made up that I thought looked good and you can change it quite a bit by experimenting with the color codes yourself. Try opening the Appearance > Customize > CSS panel and swapping out some of the color codes just to see how the menu in the live preview reacts.

  5. Thanks for making my understanding being easier and I already tried it and it looks pretty good! Now am just wondering, is there any way you can make another CSS snippet with the menu bar being the same as the Traction Theme?

  6. That would be more involved to change and I think it's more along the lines of custom design work. You could see if anyone from the community chimes in to help or you could check with a company to see how much they would charge to do design work like that, see http://en.support.wordpress.com/customize-my-site/request-theme-customization/

  7. To get a look a little closer to the Traction menu, you could add rounded corners to the Forever menu. Here's an example:

    #access {
    	border-radius: 5px;
    	border: 2px solid #004d6f;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic