Navigation Bar Colour

Community Forums Forums Design Tips and Tricks Navigation Bar Colour

This topic is: resolved

This topic contains 4 replies, has 3 voices, and was last updated by  Gary Jones 1 year, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #35357

    billyl
    Participant
    Post count: 1

    Hi,

    I am trying to change the colour of my navigation bar from gray to red. I’ve tried editing lots of the CSS but something still seems to be overriding it – I just don’t know what.

    I am using the Focus Theme. Does anyone know how to change the colour of the navigation bar?

    Here is a link to my site: http://futblogger.net

    Thank you

    #35361

    Gary Jones
    Moderator
    Post count: 693

    As you’ve got the Gray style selector in use, then changing the standard colour won’t work, as it gets overridden in the .focus-gray section towards the bottom of the style.css, around line 1976:

    [css]
    .focus-gray .menu,
    .focus-gray #header .menu li a:active,
    .focus-gray #header .menu li a:hover,
    .focus-gray .wp-caption {
    background-color: #f3f3f3;
    }
    [/css]

    #f3f3f3 corresponds to the grey you are seeing, so change it to whatever red hex colour code you want.


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1, 2.1.1 and 2.1.2 (all 90 of them!) | @GaryJ

    #35362

    Davinder Singh Kainth
    Participant
    Post count: 1363

    1. Color code of the grey background is #f3f3f3

    2. Change color in css style file here:
    .focus-gray .menu,
    .focus-gray #header .menu li a:active,
    .focus-gray #header .menu li a:hover,
    .focus-gray .wp-caption {
    background-color: #f3f3f3;
    }
     


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #35363

    billyl
    Participant
    Post count: 1

    Thank you very much, GaryJ.

    Sorry to be a pain, but how do I change the font colour and the hover colour for the navigation bar?

    Thanks again for your help, much appreciated. :)

    #35390

    Gary Jones
    Moderator
    Post count: 693

    Around line 1983, you’ll see the normal font color of #888 – change this to whatever font colour you want on top of the red menu.

    Around line 2019, you’ll see a background-color: #fff – change this to be the hover colour that replaces the red.

    Just after line 1990, you’ll see a color: #484848 – change that to whatever font colour you want when hovering.


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1, 2.1.1 and 2.1.2 (all 90 of them!) | @GaryJ

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.