[resolved] Change menu bar color (9 posts)

  1. jschwabish
    Posted 2 years ago #

    How do I change the color of the menu bar to match the color of the background? My site is http://policyviz.com/.


  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Try adding this to your custom CSS (JetPack option):

    .navigation-main {
        background: none repeat scroll 0 0 #002447;
  3. jschwabish
    Posted 2 years ago #

    That worked great! Thanks.

    Any ideas how to change the colors of the buttons in the same bar? I've been mining help forums and have been trying various CSS codes, but nothing has worked out yet.

    Thanks again.

  4. jschwabish
    Posted 2 years ago #

    Figured this out by trial-and-error playing with the CSS code under *Menu.

    Thanks for your help.

  5. fridakarlin
    Posted 2 years ago #


    I would love to get some help from you jschwabish (or if someone else can help) in how you got the right colors in your menubar!
    I have big problems with it and can´t solve it on my own. My site looks like this now: peterstromberg.se/wordpress

    I want to have like you have but red instead of orange and black where you have blue. My sub menus is wrong now with that little arrow. When you for example press the first menu item in a sub menu and then go back to choose another menu item in the same sub menu the colors of the arrow is wrong.
    And sometimes, depending on browsers my links gets red when I want them to be white.

    Do you understand my problems?
    Sincerely Frida

  6. fridakarlin
    Posted 2 years ago #

    In which PHP file did you change?
    I don´t have a Menu.php.

  7. WPyogi
    Forum Moderator
    Posted 2 years ago #

    @Frida - you need to start your own thread as per the forum guidelines -


    You can do so here:


    And do not modify any theme files - you'll mess up the site if you start doing that.

  8. jschwabish
    Posted 2 years ago #


    Go into the RTL Stylesheet under Appearance-Editor. From there, copy all the code in the '/* =Menu' section and paste it into your own CSS stylesheet (if you install the Jetpack plug-in, it will create a stylesheet for you).

    Now you can modify the colors in the pasted Menu section (in your CSS stylesheet; don't change the main theme) to fit your needs. To figure out which Hex code controls which part of the homepage, just test by changing them. For example, change the #3a3a3a to a bright yellow and test the page, etc. Once you figure out what each one does, be sure to replace every occurrence.

    Good luck.

  9. fridakarlin
    Posted 2 years ago #

    Thanks for the help! :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic


No tags yet.