Putting menu items in boxes and changing the txt and bg color of each item

  • Unknown's avatar
    rjweapon · Member ·

    Ok so I have three menu items displayed on the home page. I’d like to put the menu items in individual boxes displayed on transparent backgrounds (black, grey, yellow) left to right, as well as change the color of the text within those boxes (grey text over black bg, white over grey bg, and black over yellow bg). I managed to put the site tag line ‘beauty is for the few’ in a transparent box, but didn’t have much luck trying to tinker with the menu. I found a site which offered some pretty crazy CSS menu code but didn’t have any luck with that either. I’m guessing it needs to be more domain specific to this particular theme; otherwise, I wouldn’t have bothered you guys for help.

    The site is beautyisforthefew.com

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, you can use the unique menu item id CSS class to target individual menu items for styling. 

    .menu-item-1078 a {
    background-color: #000;
    padding-left: 5px;
    padding-right: 5px;
    color: #ccc;
    text-shadow: none;
}
.menu-item-1079 a {
    background-color: #888;
    padding-left: 5px;
    padding-right: 5px;
    color: #fff;
    text-shadow: none;
}
.menu-item-1080 a {
    background-color: #ffff00;
    padding-left: 5px;
    padding-right: 5px;
    color: #000;
    text-shadow: none;
}

    I included a bit of left and right padding so the text was not against the edges of the background color. I also removed the text shadow to make things more clear on the grey and yellow backgrounds.

  • The topic ‘Putting menu items in boxes and changing the txt and bg color of each item’ is closed to new replies.