WordPress.org

Forums

How to change the background color of the menu bar? (8 posts)

  1. ikraft
    Member
    Posted 3 years ago #

    Hi Everyone,
    I am looking to change the background color of my menu bar for my site paperwalk.in

    Is there a way to do this without creating a child's theme as i am quite new to doing it.

    Many thanks for your suggestions in advance.

    Have a nice day!
    Navin

  2. Te Calleja
    Member
    Posted 3 years ago #

    From your dashboard, go to Appearance > Editor

    Edit the css file of your template -- you're using twentyeleven, right? Change the background values of #access and use the colors that you want.

  3. ikraft
    Member
    Posted 3 years ago #

    Many thanks for the speedy reply....

    This is what i copied from my css file, can u advice where exactly these changes need to take place?

    /* =Menu
    -------------------------------------------------------------- */

    #access {
    background: #222; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#252525, #0a0a0a);
    background: -o-linear-gradient(#252525, #0a0a0a);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    background: -webkit-linear-gradient(#252525, #0a0a0a);
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
    }

  4. zimmi88
    Member
    Posted 3 years ago #

    You'll want to change the hex color values listed (#252525, #0a0a0a) to a hex value representing the color you want to use.

    Brief note on hex colors... there are three pairs of two alphanumeric characters (0-9 or A-F), each pair represents a piece of the RGB color space with a value of 0-255 (ex. black is #000000, white is #FFFFFF, red is #FF0000, etc).

    So, you need to convert your gradient color choices from RGB to Hex, then use that representation in the CSS code, replacing the old values. You can use this tool (http://www.javascripter.net/faq/rgbtohex.htm) to convert from RGB to Hex. You may also want to generate a replacement for #222, which is a solid color that'll show to browsers that don't support CSS gradients.

    I hope this helps!

  5. toocoolone
    Member
    Posted 3 years ago #

    You should replace all the 'background:' lines with your new color. If you just want one color, delete all of them and place just one background: #ffffff; where #ffffff is the HEX value of the color you desire. #ffffff is white, #000000 is black.

    If you want to use a gradient (which is what all those 'background:' statements are doing) you can grab replacement code in the color of your choice from this great website. Just copy and paste the background CSS to replace all of the background statements in the #access definition.

  6. ikraft
    Member
    Posted 3 years ago #

    thank you so much for tip, it worked finally.

    can u please advice how to i change the color of the text on the menu bar as well?

    thanks again for yr help....much appreciated

  7. Te Calleja
    Member
    Posted 3 years ago #

    insert this line:

    color: #ffffff;

    before the closing bracket } if you want to change the text to white (use the hex value of the color you want to use).

  8. callydsz
    Member
    Posted 3 years ago #

    yes is ok

Topic Closed

This topic has been closed to new replies.

About this Topic