Change font size and color in menu bar

  • Ricardo


    The title says at all really. I can’t figure out whith which code I can change the color and font size in the new menu bar.



    Would like to know too.


    Syahir Hakim


    You can find all the CSS responsible for the menu styling beginning on line 259 of the style.css file.

    I’ve also commented the sections accordingly, so you should be able to figure out which block is for which menu.

    Example – the code for the top-level primary menu:

    /* Top level header menu, default state */
    position: relative;
    #header-menu {
    background: url(images/sprite_h.png) left -3px repeat-x #101010;
    #header-menu > li {
    font: normal 14px arial;
    margin: 0 2px;
    #header-menu > li:first-child {
    margin-left: 10px;
    #header-menu > li > a {
    color: #fff;
    line-height: 16px;
    padding: 9px 10px 10px;
    #header-menu > li > a > span {
    display: block;
    font-size: 11px;
    color: #aaa;
    #header-menu > > a {
    background: url(images/sprite_master.png) -877px -236px no-repeat transparent;
    padding-left: 26px;

    /* Top level header menu, hover and current state */
    #header-menu > li:hover,
    #header-menu > li.current-menu-item,
    #header-menu > li.current-menu-ancestor {
    background: url(images/sprite_h.png) left -100px repeat-x #eee;
    #header-menu > li:hover > a,
    #header-menu > li.current-menu-item > a,
    #header-menu > li.current-menu-ancestor > a {
    color: #000;
    #header-menu > li:hover > a > span,
    #header-menu > li.current-menu-item > a > span,
    #header-menu > li.current-menu-ancestor > a > span {
    color: #484848;
    #header-menu > > a,
    #header-menu > li.current-menu-item > a,
    #header-menu > li.current-menu-ancestor > a {
    background-position: -877px -192px;



    Thanks. On my way to learning a little about css now.



    Thanks 🙂



    Hey Ricardo, did you also found out how to change the hoover color in the van menu?



    Hey, Sorry for the late reply on this. I thought I found the code, but I couldn’t get it to work. Maybe someone else has an idea on how to change the menu’s hover color? (it should be really simple) 🙂




    I’d also like to know this –




    I can’t get the color in my top bar to change. I’m looking at the #top-bar style…I already tried modifying the sprite_h color, adding a color: line of code, but nothing seems to change the color.



    I am hoping to change the color of the highlighted current page on the menu bar, but can’t find how. I’m not sure if that’s the same question “onlineanne” had or not…

Viewing 10 posts - 1 through 10 (of 22 total)

  • You must be logged in to reply to this topic.