How To Change Header Menu Button Color….

  • shanu baba

    #5088

    hi

    i want to change Header Menu Button Color…

    Just Like Prasanna Webite http://www.prasannasp.net/

    Someone help me Plz?

    Thankx

    Prasanna SP

    #30631

    If you want to have different colours for different menu items, you need to change each menu item’s background colour. Refer my style sheet.

    Sorry, I’m on mobile now. So, can’t give you any CSS code or more information.

    shanu baba

    #30632

    Prasanna U Can Give Me When Ever U Will Be Here No Problem But Thanku Sooo Much

    wpsc1

    #30633

    I was thinking about asking this same question so I’d also be interested in the answer. No hurry for me either. Thanks!

    Mod

    Kenneth John Odle

    #30634

    This feature will be available as a theme option in version 1.8.

    If you are not familiar with CSS, then it may be advisable to wait. If you are familiar with CSS, then you can take a look at Prasanna’s stylesheet (or mine from http://bookblog.kjodle.net ), or indeed anybody’s stylesheet to see how they accomplished something you like and would like to emulate.

    This topic has also been discussed many, many times in this forum, so searching the forum may be your best bet.

    shanu baba

    #30635

    Kenneth am not good in this…

    kenneth but prasanna will give me some code i hope so…..

    and if he don’t want to give me then its ok…..

    anyway thankx

    Prasanna SP

    #30636

    I’m still away from my PC. Will probably come home tomorrow evening.

    Can’t remember the exact class/div ID, but try this,

    #header-menu .li > a {
    background: #123456;
    }

    Change 123456 to whatever hex colour value. http://colorpicker.com

    To change each menu item’s background, find out it’s unique ID and use this CSS. (assuming you are using custom menus)

    #menu-item-ID:hover, #menu-item.ID.current-menu-item {
    background: #123456;
    }

    shanu baba

    #30637
    Quote:
    Prasanna

    Thankx Prasanna

    Now i hope i can do

    shanu baba

    #30638

    i change some codes but can’t find my solution…and i want to add diffrent collor of each menue button…..

    here is my style.css

    i hope someone help me in this 🙂

    /* Top level header menu, default state */

    #header-menu-wrap {

    position: relative;

    background: url(images/sprite_h.png) left -3px repeat-x #101010;

    z-index: 15;

    }

    #header-menu,

    #secondary-menu {

    margin: 0 10px;

    }

    #header-menu > li {

    font: normal 14px arial;

    margin: 0 0 0 5px;

    }

    #header-menu > li:first-child {

    margin-left: 0;

    }

    #header-menu > li > a {

    color: #FFFFFF;

    line-height: 16px;

    padding: 9px 10px 10px;

    }

    #header-menu > li > a > span {

    display: black;

    font-size: 11px;

    color: #030303;

    }

    #header-menu > li.menu-item-ancestor > a {

    background: none -3px #EF1414;

    padding-left: 10px;

    }

    /* 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 -300px repeat-x #EF1414;

    }

    #header-menu > li:hover > a,

    #header-menu > li.current-menu-item > a,

    #header-menu > li.current-menu-ancestor > a {

    color: #030303;

    }

    #header-menu > li:hover > a > span,

    #header-menu > li.current-menu-item > a > span,

    #header-menu > li.current-menu-ancestor > a > span {

    color: #030303;

    }

    #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;

    }

    /* Sub level header menu, default state */

    #header-menu ul li a {

    color: #030303;

    padding: 10px;

    width: 180px;

    }

    #header-menu ul li {

    background: url(images/sprite_h.png) left -777px repeat-x #030303;

    }

    #header-menu ul li.menu-item-ancestor > a {

    background: url(images/sprite_master.png) -652px -194px no-repeat transparent;

    padding-right: 25px;

    width: 165px;

    }

    /* Sub level header menu, hover and current state */

    #header-menu ul li:hover,

    #header-menu ul li.current-menu-item,

    #header-menu ul li.current-menu-ancestor {

    background-position: left -856px;

    background-color: #FFFFFF;

    }

    #header-menu ul li:hover > a,

    #header-menu ul li.current-menu-item > a,

    #header-menu ul li.current-menu-ancestor > a {

    color: #EF1414;

    }

    #header-menu ul li.menu-item-ancestor:hover > a,

    #header-menu ul li.current-menu-item > a,

    #header-menu ul li.current-menu-ancestor > a {

    background-position: -652px -238px;

    }

    /* Secondary menu */

    /* Top level, default state */

    #secondary-menu-wrap {

    width: 100%;

    border-top: 1px solid #000;

    background: url(images/sprite_h.png) left -940px repeat-x #EF1414;

    }

    #secondary-menu > li {

    font: normal 11px arial;

    margin: 0 5px;

    text-transform: uppercase;

    }

    #secondary-menu > li:first-child {

    margin-left: 0;

    }

    #secondary-menu > li > a {

    color: #fff;

    line-height: 16px;

    padding: 7px 10px 6px;

    }

    #secondary-menu > li.menu-item-ancestor > a {

    background: url(images/sprite_master.png) -877px -316px no-repeat transparent;

    padding-left: 20px;

    }

    /* Top level, hover and current state */

    #secondary-menu > li:hover,

    #secondary-menu > li.current-menu-item,

    #secondary-menu > li.current-menu-ancestor {

    background: url(images/sprite_h.png) left -1014px repeat-x #dfdfdf;

    }

    #secondary-menu > li:hover > a,

    #secondary-menu > li.current-menu-item > a,

    #secondary-menu > li.current-menu-ancestor > a {

    color: #000;

    }

    #secondary-menu > li.menu-item-ancestor:hover > a,

    #secondary-menu > li.current-menu-item > a,

    #secondary-menu > li.current-menu-ancestor > a {

    background-position: -877px -283px;

    }

    /* Sub level, default state */

    #secondary-menu ul li a {

    color: #000;

    padding: 7px 15px 6px;

    width: 170px;

    line-height: 16px;

    }

    #secondary-menu ul li {

    background: url(images/sprite_h.png) left -1014px repeat-x #dfdfdf;

    }

    #secondary-menu ul li.menu-item-ancestor > a {

    background: url(images/sprite_master.png) -652px -286px no-repeat transparent;

    padding-right: 20px;

    width: 165px;

    }

    /* Sub level header menu, hover and current state */

    #secondary-menu ul li:hover,

    #secondary-menu ul li.current-menu-item,

    #secondary-menu ul li.current-menu-ancestor {

    background-position: left -1084px;

    background-color: #212121;

    }

    #secondary-menu ul li:hover > a,

    #secondary-menu ul li.current-menu-item > a,

    #secondary-menu ul li.current-menu-ancestor > a {

    color: #FFFFFF;

    }

    #secondary-menu ul li.menu-item-ancestor:hover > a,

    #secondary-menu ul li.current-menu-item > a,

    #secondary-menu ul li.current-menu-ancestor > a {

    background-position: -652px -319px;

    }

    Mod

    Kenneth John Odle

    #30639

    Put code in between backtick (

    Code:
    `

    ) characters. It’s usually located above the Tab key on your keyboard.

    Also, please do not code dump. We can see your CSS just fine. If you feel the need to include a lot of code (to save us a trip to your site, for example) please post it to pastebin.com or codepad.org and then post a link here.

    Quote:
    i want to add diffrent collor of each menue button…..

    That is possible, but you will need to target each menu item (these are not buttons—buttons are something else) by its unique ID. These two tutorials may help you:

    http://blog.kjodle.net/2012/02/24/styling-wordpress-posts-pages-archives-and-home-pages-by-class/

    http://blog.kjodle.net/2012/04/14/target-graphene-action-hook-widgets-by-their-unique-id/

    Please remember that it is beyond the scope of this forum to give you the exact code you need to change the entire header. We can give you advice, but you will need to do some experimenting.

    I recommend that you use your browser’s “View Source” function to take a look at the HTML behind your menu. Ordinarily I would recommend that you use Firebug to inspect items and the code behind them, but that is tricky with drop-down menus.

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

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!