Very recently, I got a question from a WPThemeMakeover reader asking how to change the appearance of the Custom Menu widget to look like the Secondary Menu in the Twenty Fourteen WordPress theme.

I think the answer to this question could be of interest to others as well, therefore it makes good material to be shared in a post.

Here’s the problem in detail and what I did to solve it.

The Problem
The problem at hand can be described as follows. The Twenty Fourteen theme has 2 navigation menu locations: a Top Primary Menu that appears at the top of the page, and a Secondary Menu, which is located inside the sidebar.

Menu Locations In The WordPress Twenty Fourteen Theme
Menu Locations In The WordPress Twenty Fourteen Theme
After you create two navigation menus and assign one to the Top Primary Menu location (I called this Main Menu) and another to the Secondary Menu location (I called this menu secondary menu) in the Appearance > Menus panel in the WordPress back-end, this is what they look like when the menus are displayed on the page.

Top And Secondary Menus In The WordPress Twenty Fourteen Theme
Top And Secondary Menus In The WordPress Twenty Fourteen Theme
You could also add Custom Menus with WordPress from the Widgets panel.

Widgets Panel And Custom Menu Widget
Widgets Panel And Custom Menu Widget
To see what the Custom Menu widget looks like when it’s displayed on the page, I need to create a third menu in the WordPress Menus panel. I call this menu My Custom Menu.

Next, I go to the Widgets panel and add a Custom Menu widget to the Primary Sidebar widgets area. I select My Custom Menu as my menu of choice and I even add a title, just for demonstration purposes (you don’t need to do so).

Custom Menu Widget Panel
Custom Menu Widget Panel
This is what the Twenty Fourteen theme sidebar looks like in the browser after I save the Custom Menu widget in the Widgets area.

Default Look of the Custom Menu In Twenty Fourteen Theme
Default Look of the Custom Menu In Twenty Fourteen Theme
As you can see, the Custom Menu has a different appearance from the Secondary Menu. What my reader wants to achieve is to make the Custom Menu look the same as the Secondary Menu to create a consistent experience.

Here’s what I did to achieve this result.

The Solution
The solution to this WordPress theme customization problem lies entirely with an appropriate use of Cascading Style Sheet (CSS).

Using Firebug, the great Mozilla Firefox browser add-on, I start by reviewing the HTML mark-up and the classes applied to the Secondary Menu and the Custom Menu.

I realize that the differences in the HTML mark-up structure between the two menus are not very significant. However, the different classes added to the two menus carry important styling differences associated with them.

The Secondary Menu has a class called .secondary-navigation, and the Custom Menu has a class called .widget_nav_menu. My approach is quite simple: changing the CSS rules of the .widget_nav_menu class to be the same as those of the .secondary-navigation class.

Here’s the customization process step-by-step.

1: Creating A Twenty Fourteen Child Theme

I always prefer working with child themes because they offer that flexibility and room for customization that a custom CSS plugin, in my view, doesn’t offer. However, you can use such a plugin if you prefer. I recommend the Simple Custom CSS plugin if you opt for the plugin route.

My child theme is located in a folder called twentyfourteen-child inside the themes folder of my local WordPress install.

My style.css document inside the Twenty Fourteen Child theme has the appropriate comment at the very top and an import statement for the parent theme’s stylesheet, like so.

/*
Theme Name: Twenty Fourteen Child
Theme URI:
Description: This is a child theme of 2014
Author: WPThemeMakeover.com
Author URI: http://wpthememakeover.com
Template: twentyfourteen
Version: 0.1
*/

@import url(“../twentyfourteen/style.css”);
This is all that’s needed to see the new Twenty Fourteen Child theme inside the Themes panel of my WordPress install. Now I activate it and start working with it.

2: Adding The Appropriate Styles To The .widget_nav_menu Class

The next step consists in going through the parent theme’s stylesheet and pinpointing the CSS rules applied to the .secondary-navigation class. Hint: use the Find utility in your code editor.

Finally, I apply those style rules to the .widget_nav_menu class, tweaking a few values if necessary. In my sample code I limit the Custom Menu to first-level items, for simplicity’s sake, therefore I only apply CSS rules relative to first-level menu items.

Here’s what style.css of my Twenty Fourteen Child theme looks like after these modifications.

.widget_nav_menu {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-size: 12px;
margin: 48px 0;
}

.widget_nav_menu ul {
list-style: none outside none;
margin: 0;
}

.widget_nav_menu li {
border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
position: relative;
padding-bottom: 0 !important;
}

.widget_nav_menu a {
padding: 8px 30px !important;
color: #fff;
display: block;
text-transform: uppercase;
}

/* Media Queries */
@media screen and (min-width: 1008px) {
.widget_nav_menu {
font-size: 11px;
margin: 0 -30px 48px;
width: 182px;
}

.widget_nav_menu .widget-title {
margin: 0 30px 18px;
}

.widget_nav_menu li {
border-top: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
}

.widget_nav_menu a {
padding: 10px 30px;
}

.widget_nav_menu li:hover > a,
.widget_nav_menu li.focus > a {
background-color: #24890d;
color: #fff;
}
}

@media screen and (min-width: 1080px) {
.widget_nav_menu {
width: 222px;
}
}
And here’s what the Twenty Fourteen Child sidebar looks like in the browser.

Customized Sidebar in Twenty Fourteen Child Theme
Customized Sidebar in Twenty Fourteen Child Theme
Customized Sidebar With Link Hover Effect in Twenty Fourteen Child Theme
Customized Sidebar With Link Hover Effect in Twenty Fourteen Child Theme
Customized Sidebar With Link Hover Effect On Smaller Screen in Twenty Fourteen Child Theme
Customized Sidebar With Link Hover Effect On Smaller Screen in Twenty Fourteen Child Theme
Now the Secondary Menu and the Custom Menu in the sidebar of the Twenty Fourteen Child theme look the same. This creates a pleasant and consistent effect throughout the site.

If you’ve followed along with my tasks and you notice something wrong in the location of the menus, make sure each menu has been assigned to the appropriate location in the Menus panel, i.e., the Main Menu to the Top primary menu location, the secondary menu and My Custom Menu to the Secondary menu in left sidebar location.

Also, make sure you’ve selected My Custom Menu from the Custom Menu drop-down box of the Custom Menu widget in the Widgets panel.

To Sum Up
WordPress themes offer flexible customization opportunities and, thanks to one of my readers, I’ve shown how some CSS can go a long way in customizing an already beautiful theme to achieve greater consistency, therefore offering a better user experience for your website visitors.

WHAT DID YOU CHANGE OR WOULD LIKE TO SEE CHANGED IN THE WORDPRESS TWENTY FOURTEEN THEME? WHY NOT SHARING YOUR VIEWS WITH THE WORLD USING THE COMMENT BOX BELOW?

Leave a comment

Your email address will not be published.