Support » Theme: Brunelleschi » [Theme: Brunelleschi] How to change colors in Navigationbar

  • Hey guys,

    i am currently working on a project for my semester at my university. I want to build homepage for a PR Agency in Germany. It is my first time building a page, so i am relatively new to this stuff.
    On this page: i want to change the colors of the font. When you click on “Leistungen” and then hover over it, every subsite name is shown in grey. How can i change that? I want to have every name there in black,so that you can read it better…

    What i already found out with firebug and changed in the CSS window is shown below. Maybe i made a mistake there, because i dont understand it for 100%. I really came to this settings by trial and error. 😉

    #access li a:hover {
    background: #ff9900 !important;
    color: Black !important;
    }

    #access ul ul a {
    background: none repeat scroll 0 0 #ff9900 !important;
    height: auto;
    line-height: 1em;
    padding: 10px;
    }

    #access li:hover > a, #access ul ul *:hover > a {
    background: none repeat scroll 0 0 #ff9900;
    color: black !important;
    }

    #access ul ul {
    background: none repeat scroll 0 0 #ff9900;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 0;
    position: absolute;
    top: 38px;
    z-index: 99999;
    }
    #access a {
    color: black;
    display: block;
    line-height: 38px;
    padding: 0 10px;
    text-decoration: none;
    }

    Thank you in advance!

    http://wordpress.org/extend/themes/brunelleschi/

Viewing 15 replies - 1 through 15 (of 23 total)
  • Moderator Andrew Nevins

    (@anevins)

    When you’re changing CSS, are you using a Child Theme?

    No i did it all in this little window in brunelli options. How do i do that?

    Moderator Andrew Nevins

    (@anevins)

    little window in brunelli options

    Is this a Custom Style or Custom CSS option?

    In Brunelli Theme options there is one little window, where you can put your code in. It says: Custom CSS. Hope it helps..

    Moderator Andrew Nevins

    (@anevins)

    This sounds correct.
    To change the colour of selected menu items, try;

    #access ul li.page_item a:visited {
     color: yourColour;
    }

    Moderator Andrew Nevins

    (@anevins)

    To change the colour of hovered menu items, try;

    #access li:hover > a,
    #access ul ul :hover > a {
     color: yourColour !important;
    }

    Remember to add !important at the end.

    Hey thanks for your help!

    Only last problem is still when you click on “leistungen” every other subsite in the navigationbar is still grey…

    i already put your code into the window and saved it like this now:

    ‘#access li a:hover {
    background: #ff9900 !important;
    color: Black !important;
    }

    #access ul ul a {
    background: none repeat scroll 0 0 #ff9900 !important;
    height: auto;
    line-height: 1em;
    padding: 10px;
    }

    #access li:hover > a, #access ul ul *:hover > a {
    background: none repeat scroll 0 0 #ff9900;
    color: black !important;
    }

    #access ul ul {
    background: none repeat scroll 0 0 #ff9900;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 0;
    position: absolute;
    top: 38px;
    z-index: 99999;
    }
    #access a {
    color: black;
    display: block;
    line-height: 38px;
    padding: 0 10px;
    text-decoration: none;
    }

    #access ul li.page_item a:visited {
    color: #666666 !important;
    }
    #access li:hover > a,
    #access ul ul :hover > a {
    color: black !important;
    }’

    Moderator Andrew Nevins

    (@anevins)

    Only last problem is still when you click on “leistungen” every other subsite in the navigationbar is still grey..

    Sorry I don’t understand what you mean by ‘subsite’.

    If you click on leistungen, it will turn grey, which is ok. But when you now hover over leistungen, every name below is also grey.
    How can i change the color of that?

    Moderator Andrew Nevins

    (@anevins)

    I think these selectors

    #access ul ul :hover > a

    Within this style

    #access li:hover > a,
    #access ul ul :hover > a {
    color: black !important;
    }

    Controls colour to the sub-menu links.

    Sorry but i don’t understand what i have to change now?
    I want to have the fontcolor of sub-menu links in black like the top navigation already is.
    Would you be so kind to help me where i must write what code? Thank you very much!!

    I changed this color in :
    ‘#access li:hover > a,
    #access ul ul :hover > a {
    color: black !important;
    }’

    to white- well it changes only the hover color, but that was already ok with black.

    What i meant is, when you click on “leistungen” it’ll turn to grey. That’s fine, but all other sub-menu links will also turn to grey. I want these submenu to behave like the mainmenu links. So they should be black and only change to grey, when you’re actually on this site.

    Do you have any idea to change this?

    Moderator Andrew Nevins

    (@anevins)

    The main menu links are controlled by

    #access li:hover > a

    The sub menu links are controlled by

    #access ul ul :hover > a

    To avoid applying the style to the sub menu links, remove that line (and subsequent comma).

    E.g
    you want something like this

    #access li:hover > a {
     color: black !important;
    }

    Hm i cannot change that problem 🙁 Is it possible, that some previous code is in conflict with this new one?
    Here is everything in my Custom CSS box about the navigation colors:

    #access li a:hover {
    background: #ff9900 !important;
    color: Black !important;
    }

    #access ul ul a {
    background: none repeat scroll 0 0 #ff9900 !important;
    height: auto;
    line-height: 1em;
    padding: 10px;
    }

    #access li:hover > a, #access ul ul *:hover > a {
    background: none repeat scroll 0 0 #ff9900;
    color: black !important;
    }

    #access ul ul {
    background: none repeat scroll 0 0 #ff9900;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 0;
    position: absolute;
    top: 38px;
    z-index: 99999;
    }
    #access a {
    color: black;
    display: block;
    line-height: 38px;
    padding: 0 10px;
    text-decoration: none;
    }

    #access ul li.page_item a:visited {
    color: #666666 !important;

    }
    #access li:hover > a {
    color: black !important;
    }

    Is it maybe because of the bold printed code? Do i have to put some more code there, which excludes submenulinks in there?

    Moderator Andrew Nevins

    (@anevins)

    Also add this

    #access ul ul :hover > a {
     color: #yourColour !important;
    }

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘[Theme: Brunelleschi] How to change colors in Navigationbar’ is closed to new replies.