Background Color of One Menu Item

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

RSS feed for this topic

Reply

You must log in to post.