View Full Version : Menu Bar as Buttons

07-05-2011, 06:45 PM
I am trying to modify a free wordpress theme, to turn a menu bar into a row of menu buttons with rounded edges. I have tried my usual method of changing one attribute at a time, but I still can't figure this portion of code out. My problems are:

1. I want the background color of the "active" menu item to be the background color of all menu items all the time, not just when hovering over them.

2. When hovering presently, I noticed there is no space between the items if they all had the same background color. There used to be, but it disappeared, when I copied the old code back in after changing something, and I think there's a spacing issue somewhere, but am not sure where.

3. I would like the bottom corners of the "buttons" to be rounded just like the top corners, and have to create gif files for this, but am not sure where to place the code when I have them.

Anyone who can help me with any of this, I would be so grateful! Code section is below:

/*Navbar */
#nav, #nav ul { list-style: none; line-height: 1; }
#nav a, #nav { text-decoration: none; border:none; font-size:11px; }
#nav li { display:block; float:left; list-style:none; margin-left:0px; }
#nav li a, #nav li a:visited { color:#05454f; display:block; padding:0 0 5px 15px;}
#nav li a strong, #nav li a:visited strong { text-decoration:none; padding:6px 13px 5px 0; display:block; }
#nav li a:active, li.current_page_item a, #home li.on, #nav li a:hover
{ background: #FFAD3B url(images/nav-link-left.gif) left top no-repeat; color: #29b0c4; text-decoration:none;padding:0 0 5px 15px; display:block; }
#nav li a:active strong, li.current_page_item a strong, #home li.on strong, #nav li a:hover strong{ background:#FFAD3B url(images/nav-link-right.gif) right top no-repeat; text-decoration:none; color: #29b0c4; padding:6px 13px 5px 0; display:block;}