Change font size and color in menu bar

  • Ricardo

    #1347

    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.

    bobsled

    #15363

    Would like to know too.

    Admin

    Syahir Hakim

    #15364

    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 */
    #header-menu-wrap{
    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 > li.menu-item-ancestor > 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 > li.menu-item-ancestor:hover > a,
    #header-menu > li.current-menu-item > a,
    #header-menu > li.current-menu-ancestor > a {
    background-position: -877px -192px;
    }

    bobsled

    #15365

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

    Ricardo

    #15366

    Thanks 🙂

    onlineanne

    #15367

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

    Ricardo

    #15368

    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) 🙂

    Ricardo

    ladesignz

    #15369

    I’d also like to know this –

    Tina

    bwalklet

    #15370

    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.

    http://www.searchandperch.com

    VictoriaMarie

    #15371

    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.