How To Make The Custom Menu Widget Look Like The Secondary Menu In The Twenty Fourteen WordPress Theme

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?
Advertisements

18 thoughts on “How To Make The Custom Menu Widget Look Like The Secondary Menu In The Twenty Fourteen WordPress Theme

  1. Français :
    Antonella vous êtes une championne. Vraiment, superbe article. Son résultat est tout aussi super. Cela fonctionne parfaitement à l’ensemble des menus présents dans la sidebar de gauche. Vous êtes une artiste et une personne réellement serviable…. Merci beaucoup pour ce magnifique tutoriel. 🙂 🙂

    English :
    Antonella you are a champion. Really great article. The result is just as great. This works perfectly with all the menus found in the sidebar on the left. You are an artist and really helpful person …. Thank you very much for this wonderful tutorial. 🙂 🙂

  2. Hi Maria, Just what I was looking for. However, I got 2 questions:
    1) how do I adjust de hover color of the blocks (I use fourteen colors but that doenst do the trick)
    2) can I adjust other widgets (recent post for instance) the same way (I suppose I can, but didn’t manage yet)

    Regards, Bas

    • Hi Bas,
      Thanks for checking out my article.

      If you follow the tutorial step by step the hover color should be the same as that of the default Secondary Menu. In fact, the goal was to make the Custom Menu widget look and feel the same as the Secondary Menu that’s located in the sidebar. If you’d like any more style changes you’ll need to use CSS.

      As for the second question, if you’d like to change the look and feel of the other sidebar widgets, you’re better off using CSS for this one too.

      Simply use a custom CSS plugin (https://wordpress.org/plugins/simple-custom-css/screenshots/) or a child theme to add style changes to your theme. To target the elements that you need styling use a web developer tool in the browser, something like Firebug for Firefox or the Developer tools in Chrome.

      If you have problems, feel free to send me a link to your website and more details about your requirements and I’ll have a look into it.

      I hope this helps 🙂

  3. Hi Maria,
    Thanks for your quick reply.

    I made a child theme using twenty fourteen as basis. I did some css changes but also use plugins. With “fourteen colors” I changed the default color green to blue for search bar, etc. But, there is no option (of I cant find it) to change the color of the secondairy menu. I do want to have my custom menu look like the secondary menu, but with other colors. I was hopening you could point me to the right css hook.

    I made a few custom menus in de sidebar, but also put a “last posts” widget (or “recently updated” or whatever). I think I found the divs en spans I have to adjust (i.e. .widget_rrecent_entries) but it’s nog working the way it should. Hope you could help me with that as well.

    The url of my website is www point basenmandy point nl (of course replace “pont” with a “.”)

    Regards,
    Bas

    • Hi Bas,
      Thanks for providing the URL to your site, this makes it easier to find a solution.

      Targeting the right CSS selector depends on what you want to change. For example, adding this CSS rule to styles.css in your child theme would change the link color to green and the link background color to white in the recent news widget:

      .widget.widget_recent_entries a {
      background: white;
      color: green;
      }

      Something like this would do the same to the custom menu widget:

      .widget.widget_nav_menu a {
      background: white;
      color: green;
      }

      Finally, this would do the same thing to the widget links (the last one in the sidebar):

      .widget.widget_links a {
      background: none repeat scroll 0 0 white;
      color: green;
      }

      If you want to target the heading instead of the anchor tags (the links), simply replace a with h1 or with .widget-title and it should work. Obviously, the above styles are horrid, but they illustrate how it’s possible to manipulate the appearance of those links.

      • Hi Maria,
        Thanks again! I managed to adjust all widgets I want (i.e. recent entries, links and nav_menu). I do see changes when I adjust the css. So things are going the right way.

        However, for some reason I cant get hover working. Actualy, I like it the way the primairy menu works (in my case with blue hover). But when I set a:hover to whatever color in my css, this color comes up, but not only on hovering, but always. Do you understand what I mean. Is there a way to copy the primairy menu style to other places (i.e. nav_menu etc)?

        Regards,
        Bas

      • Hi Bas,
        I’m glad your design is making wonderful progress. As for the hover color on the links in the sidebar, I found all links have the blue color you want to achieve except for the last set with the title of LINKS. If you want the blue color on hover for those as well, just add this snippet to your CSS:

        .xoxo.blogroll a:hover,
        .xoxo.blogroll a:focus {
        color: #3e8ce5;
        }

        I hope it helps 🙂

  4. Maria, thanks for the detailed post on this! It’s been a good learning tool. Can you help me figure out how to change the styling on an a widget title? Specifically it’s the title of a custom menu from the WP Custom Menu widget and it’s adopting my settings for the H2 tag for my theme, but I want it to have a different style without having to change the settings for my H2 tags or will effect my whole site.

    I think the approach is to include in my child theme’s style.css file the parent classes above the actual h2 class=”widget title” class that’s around my widget title text. Here is the code from the site:

    Section Pages

    I’d like to override my h2 style’s UPPERCASE and font-size of 30px to style titles of custom menus to be text-transform: none and font-size: 25px

    Can you tell me how to write that in CSS for my style.css file?

    • Hi Kirk,
      Thanks for stopping by!
      You don’t need to copy any specific CSS rules from parent to child theme: if you either @import the parent theme’s stylesheet from the child theme’s stylesheet or enqueue it from functions.php of your child theme (which is the recommended way), your child theme should inherit the parent styles automatically. You only need to add your custom CSS code inside style.css of the child theme and it will override the parent’s. In this case, try this:

      .vc_wp_custommenu .widget_nav_menu .widgettitle {
      font-size: 25px;
      text-transform: none;
      }

      I hope this helps 🙂

  5. Thanks so much Maria. I’d like to enqueue the parent theme’s stylesheet, as that’s what’s recommended, but not sure I’ve done it correctly. Plenty of examples of the code for this to be placed in the child theme’s functions.php file I created, but still doesn’t seem to work. Does that code have to have any specific references to my theme’s name? None of the examples I’ve found seem to include a reference to an actual theme name, so I’m assuming not, but that’s the only thing I can thing might be wrong with an otherwise pretty simple process. I’ll paste the code I used in here, but not sure it will post:

    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
    function theme_enqueue_styles() {
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
    wp_enqueue_style( ‘child-style’,
    get_stylesheet_directory_uri() . ‘/style.css’,
    array(‘parent-style’)
    );
    }

  6. Salve Maria Antonietta, dal tuo nome credo che posso parlare italiano.
    innanzitutto grazie per la guida. Vorrei sapere come fare per ottenere l’effetto “Bold” del testo, per indicare la pagina in cui mi trovo.
    Per esempio quando mi trovo in Home il tasto home diventa in grassetto.
    Grazie

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s