Secondary WP Nav Menu Customization

Comment on WordPress Custom Nav Menu by SEO Dave.

To keep the CSS used to a minimum the two menus share the same rules.

If you wanted the secondary navigation menu to use a different rule set you’d need to create a second rule set.

There’s CSS classes specific to the two different ways to use the secondary nav menu:

.header_nav_box_top – For when the secondary WP nav menu isn’t fixed at the top and

.header_nav_box_top_fix – For when the secondary WP nav menu is fixed.

Depending on which version of the secondary menu you use (fixed or not) determines which of the two you’d use. I’ll use fixed for the example.

Find the general CSS rules you want to change for the secondary nav menu and make a copy. Within the colour CSS file you are using are a set of CSS rules starting .srumenu these are the menu CSS rules.

Below is one of the CSS rules.

.srumenu {
background-color: #404040;
background: -webkit-gradient(linear, left top, left bottom, from(#404040), to(#282828));
background: -webkit-linear-gradient(top, #404040, #282828);
background: -moz-linear-gradient(top, #404040, #282828);
background: -ms-linear-gradient(top, #404040 0%, #282828 100%);
background: -o-linear-gradient(top, #404040, #282828);
background: linear-gradient(top, #404040, #282828);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#404040', endColorstr='#282828');
clear: both;
font: normal normal normal 90%/200% Arial, Helvetica, sans-serif;
margin: 0 auto;
}

Simply making a copy of a rule and adding the .header_nav_box_top_fix to the rule will mean it only works for the fixed version of the secondary menu.

.header_nav_box_top_fix .srumenu {
background-color: #404040;
background: -webkit-gradient(linear, left top, left bottom, from(#404040), to(#282828));
background: -webkit-linear-gradient(top, #404040, #282828);
background: -moz-linear-gradient(top, #404040, #282828);
background: -ms-linear-gradient(top, #404040 0%, #282828 100%);
background: -o-linear-gradient(top, #404040, #282828);
background: linear-gradient(top, #404040, #282828);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#404040', endColorstr='#282828');
clear: both;
font: normal normal normal 90%/200% Arial, Helvetica, sans-serif;
margin: 0 auto;
}

By using “.header_nav_box_top_fix .srumenu” it means that CSS rule will look for an element using the .srmenu class that’s also within an element with the .header_nav_box_top_fix class.

So the original CSS rule is general, acts on all instances of .srumenu and the modified version only acts on the .srumenu that’s also within an element with class .header_nav_box_top_fix.

You could either make a partial copy and modify the rules you want to change or make an entire copy of all the CSS rules related to the menu.

If all you wanted was smaller text for example, but the same colours you only need to copy and modify the bit of the rule related to font size:

.header_nav_box_top_fix .srumenu {
font: normal normal normal 80%/200% Arial, Helvetica, sans-serif;
}

The above would have the secondary nav menu the same as the other menu, except the font size is smaller.

David