Navigation Menu

[Philippine Seven]

Hi Bill,

Is it possible to add background boxes in the navigation menu (Progress Theme)? Just like in the media theme? Thanks.

[Bill Robbins]

It is possible to do that. You can paste this into the box for Custom CSS:

.primary a {
	padding: 4px 5px 2px;
}

.primary nav a:hover, 
.primary .current-menu-item a, 
.primary .current-post-parent a, 
.primary .current_page_ancestor a {
	color: #ccc;
	background-color: #000;
}

That will add a bit of padding to each menu item and set the background color to black and the text to silver. You can change the colors to fit your needs.

If you have trouble let me know.

Have a great week,
Bill

[Philippine Seven]

Hi Bill,

It’s working fine. Thanks.

I’d just like to ask if the menu boxes could have circular corners? Like in your page?

United

[Philippine Seven]

Hi Bill,

I’m really sorry for asking too much. Kindly disregard my previous question. Here’s what I’m thinking. Is it possible to have a navigation menu (for the Progress Theme) similar to that of the Agency Theme? In which there is a transparent background box for the entire menu and sub-menu. I’m really sorry. Thanks.

[Bill Robbins]

You’ll need to test this in Internet Explorer 8 to make sure the semi-transparent background works properly, but here’s the code you could use to achieve something similar to the Agency Theme:

header.primary nav {
	background-color: rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000030,endColorstr=#009000030);
	zoom: 1;
	padding: 3px 10px 3px 0;
}

header.primary nav a,
header.primary nav a:visited {
	padding: 3px 7px 5px 8px;
	color: #fff;
}

.primary nav a:hover, 
.primary .current-menu-item a, 
.primary .current-post-parent a, 
.primary .current_page_ancestor a {
	color: #fff;
	background-color: #000;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}


.primary nav li li a,
.primary nav li li a:hover,
.primary nav li li a:visited {
	color: #fff;
}

.primary nav li ul {
	background-color: rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000030,endColorstr=#009000030);
	zoom: 1;
	padding-right: 15px;
}

[Philippine Seven]

HI Bill,

Thanks for this. Hmm, I also would like to ask how to make the corners of the boxes of the widgets and slide show circular, similar to that of the menu boxes? Thanks.

[Bill Robbins]

Great question. You can do this to make the corners of the widgets round:

.widget {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

The slideshow however is a bit tricky. Firefox won’t round the slideshow images, but Chrome and Safari can. Here’s how to use that for them:

#slideshow {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

I hope that helps out,
Bill

[Jerome Stoel]

Hi Bill,
I have two questions about the navigation menu

1. Is it possible, and how to set the width of roll-down menu, so I can get longer names on one line?
2. Can you add sub-sub-menu’s to the navigation menu? I couldn’t find the option to set it

Thanks!
Jerome

[Bill Robbins]

Jerome,

Great questions. You can change the width of the drop-down menu items. Here’s how:

1. Go to the theme options page and select the styling tab.
2. At the top of the page select “yes” to include custom styling.
3. Scroll down to the very bottom until you see a box labeled “Custom CSS.”
4. Paste this into that box:

   
   .primary nav li ul {
   	width: 180px;
   }
   
   .primary nav ul.menu li li:hover ul,
   .primary nav ul.menu li li.sfHover ul {
   	width: 180px;
   	left:  180px; 
   	top: -20px;
   }
   
   .primary nav ul.menu li li li:hover ul,
   .primary nav ul.menu li li li.sfHover ul {
   	left:	180px; 
   	top:	0;
   }
   

5. Upadte your settings.

See if that doesn’t make the drop-down menu wider. If you need more space, you can change the 180 each spot above to a larger number and that will increase the width more.

Add sub-sub-menu items.
Basically these work just like the first level drop downs work. Just drag the item you’d like to make a drop down to the right and WordPress will indent it for you which will make it a sub-sub menu.

Here’s a quick screenshot of what that can look like:

There is a quick screencast in our video section that walks trough the menu section in case you have any trouble with that.

If you have any questions or trouble, let me know.

Thanks,
Bill

[Author]

Posts