Background Color of One Menu Item

pending (7 posts) (3 voices)

  1. orumissions
    Member

    I want to change the background color of just one menu item (i.e. the Donate tab) to red, like shown in the attachment titled "desired look.png". I want it to happen in my website's menu (the attachment labelled "mysite.png")

    I have the InFocus theme by the way.

    Thanks

    Example menu
    My Menu

    Attachments

    1. mysite.png (45.8 KB, 0 downloads) 3 months old
    2. desired_look.png (54 KB, 1 downloads) 3 months old
    Posted 3 months ago #
  2. orumissions
    Member

    Hello,
    I figured out how to change the background color (add css code to add background image in the Dashboard->Appearance->Menu->Donate). But only the area immediately around the text is affected by the code (see attached image). How do I expand this area, so that I see a bigger size red box behind the Donate menu item.

    Thanks

    Attachments

    1. menu.PNG (27.6 KB, 0 downloads) 3 months old
    Posted 3 months ago #
  3. Webtreats
    Support

    Hello orumissions,

    With WordPress' 3.0 menu system you can add classes to individual menu items as shown in the screenshot below:

    Then you can style it in your "General Settings > Custom CSS" box like so:

    .my_class{background-color:#770000;}

    Attachments

    1. my_menu_class.png (86.6 KB, 1 downloads) 3 months old
    Posted 3 months ago #
  4. Webtreats
    Support

    Hi orumissions,

    I answered your first post before I saw your second. I would need to see a link to your site, because it should be taking up a larger area by default.

    Posted 3 months ago #
  5. orumissions
    Member

    Yes, I tried your method and it works. My mistake was that I was adding the CSS code directly in the Menu item's "Navigation Label" field.

    Posted 3 months ago #
  6. orumissions
    Member

    I am having some more problems. I want the red box to be a certain size, and want the text to be exactly in the center of the red box. If I am changing the position in my CSS class like :

    .donate_background
    {
    background-color:#FF3333;
    height:30px; width:75px;
    top:20px; right:20px;
    }

    the whole "Donate" menu item is moving, not just the red background like so:

    How do I position only the background color so that the Donate text is exactly in the center of the red box

    Attachments

    1. customcss.PNG (21.3 KB, 0 downloads) 3 months old
    Posted 3 months ago #
  7. Elliott
    Support

    Send us a link and we'll take a look.

    Posted 3 months ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme