Themeforest

WordPress Tutorial – Current & Parent Menu Items In Custom Menus

With the custom WordPress menus available with WordPress 3.0 there are inherent systems that allow us to identify which is the current menu item and it’s parent links. Unfortunately these aren’t very obvious and going through the source code to pick them out can be a nightmare.

Today we are going to highlight a few of these classes and demonstrate how they can be used to create a simple but effective menu system using only CSS. The same principles can then be applied to your own menus/themes to add custom styling to active menu items or parent links.

For the demonstration we will create a simple 2-tier horizontal menu. The 2nd level sub-menus are only visible when the user browses to the parent menu page.

View Demo Menu

The Menu Structure

In the WordPress custom menu admin panel our menu structure looks like this:

Menu Structure

Very simple – 3 main menu items – 2 with sub-menus.

Basic Menu CSS

The 2 important CSS classes that the WordPress menu system uses are:

  • current_menu_item – used to identify the link representing the current page
  • current-menu-parent – the class given to the parent li tag of the current_menu_item

We are going to incorporate the above 2 classes into our menu styling so that the current menu item is styled to visually indicate that this is the active page. We are also going to use the current_menu_parent class to change the display status of the sub-menu so that the child links will be visible.

The following shows the complete CSS used to create the demo menu. The comments in the style sheet highlight the key rules in creating the menu structure and how it functions.

.menu {
font: normal 13px Arial, sans-serif;
background: url(../images/bg_blue_demo.png) repeat-x 0 -80px;
width: 100%;
height: 40px;
border-left: 1px solid #304B73;
position: relative; /* Required for positioning of sub-menus */
}
.menu li ul {
display: none;  /* Required to hide menu when inactive */
position: absolute;  /* Position the menu below and to the far left */
top: 40px;
left: 0;
}
/* This is the rule that displays sub-menus when a parent link is clicked */
.menu li.current-menu-parent ul, .menu li.current-menu-item ul {
display: block;
}
.menu li {
float: left;
margin: 0;
padding: 0;
font-weight: bold;
}
.menu li a {
float: left;
display: block;
color: #fff;
background: url(../images/bg_blue_demo.png) repeat-x 100% 0;
padding: 12px 25px;
text-decoration: none;
}
.menu li a:hover {
background-position: 100% -160px;
color: #fff;
}
/* Styling for current parent item */
.menu li.current-menu-item a, .menu li.current-menu-parent a{
background-position: 100% -40px;
color: #000;
}
/* Styling for sub-menus */
.menu li ul {
width: 904px;
background: url(../images/bg_blue_demo.png) repeat-x 0 -120px;
border: 1px solid #999;
border-top: none;
}
.menu li ul li {
padding: 6px 0;
}
.menu li.current-menu-item ul li a, .menu li.current-menu-parent ul li a {
background: url(../images/bg_bdr.png) repeat-y right center;
color: #666666;
padding: 6px 35px;
}
.menu li ul li a:hover {
color: #000;
}
/* Styling for current page sub-menu links */
.menu li.current-menu-parent ul li.current-menu-item a, .menu li.current-menu-parent ul li.current-menu-item a:hover {
color: #990000;
}

Although there are several other CSS classes used by the WordPress custom menus the above 2 are probably the easiest to use and apply to your own menu. Although at first it may appear a little confusing fortunately the system is fairly logical.

Using these classes to add visual indicators for current page and parent links improves the useability and makes navigating your site much less confusing for your users.

View Demo Menu

26 Comments

  • Thank you so much, I’ve been hunting around for days for information on how to style a current page when using the custom menu widget!

    Problem solved :)

    • Hi,

      Great. Glad it helped

  • Hi Lee.. at first thanks für your article.. it realy helps a lot. Could you please tell me how i can justify both lines to the right? I tryed a couple of hours and can`t get a satisfying result….

    best reguards

    • Hi,

      To align right you would float the menu to the right

      • thanks for your reply Lee.. i expermented with float:right; but unfortunately i had no success at all.. i mad my way with direction:rtl; …compromise solution …

  • Lee, please take a little more time to explicitly show how another menu generator might be substituted.

    “Alternatively you can relatively easily modify the plugin code to use a custom function that would generate your menu using wp_list_pages with your required parameters. Just replace line 60 of dcwp_jquery_mega_menu_widget.php to use your menu function instead of wp_nav_menu”

    Way too terse to clear things up. Help us verify that the line 60 you refer to is the one we are looking at.

    And then some examples using that alternative. Before and after.

    For instance, my theme header contains a menu dropdown function that creates the Categories in their proper parent and subs.

    The whole thing is this:

    echo cp_cat_menu_drop_down( get_option(‘cp_cat_menu_cols’), get_option(‘cp_cat_menu_sub_num’) );

    If I leave out the echo how would I experiment with a custom menu substitution at the “line 60″ you refer to?

    Thank you!

  • Thank you so so much! I was having the hardest time getting my sub-menus to not look like my parent menus when I hovered over them. I’m still super new to CSS and it’s pretty much trial and error with me, but this was a great help.

    If you have the chance, I do have a quick question. My main menu buttons are images and when my sub-menus come up they cover up some of them. It’s not a big deal, but I thought I’d see if you knew how to push the sub-menus to the back instead of covering up the main menu. No worries if you don’t know what I’m talking about haha.

    Thanks again!!

    • Hi,

      Do you have a link I can look at?

      • Sadly not right now, I’m working on my computer without a server at the moment. When I get it up and running, I will pass on a link to see if you have any input–if that’s alright.

        It’s great that you’re so willing to help, thank you!

        • Hey again,

          Here’s a link to my website: http://mollyofalltrades.org/ . You should be able to see how the notebook paper drop-down menus cover up the blue labels when they come down, and that’s what I wanted to see if there was a way to push them to the back.

          Sorry that the website is pretty rough, I’m really a super beginner and guessing at things right and left haha.

          Thanks so much for taking a look and any suggestions you come up with.
          Molly

          • Hi,

            The CSS needs to be rewritten to swap how the background image for the dropdown menu is applied. The code below should handle it – I have changed the selector to ul.menu so its not as confusing – basically replace lines 612 – 714 in the current css file with the following (obviously save a copy in case its not what you wanted!):

            #access ul {
            	list-style: none;
            	padding: 0;
            	margin: 0;
            }
            ul.menu {
            	font-size: 16px;
            	color: #000;
            }
            ul.menu li {
            	float: left;
            	position: relative;
            }
            ul.menu a {
            	color: #000;
            	font-family:"Segoe Print";
            	display: block;
            	float: left;
            	line-height: 3.333em;
            	padding: 0 0.8em;
            	text-decoration: none;
            	height: 74px;
            	width: 97px;
            	background: url(../../../images/Home1.png) no-repeat 0 0;
            }
            ul.sub-menu {
            	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
            	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
            	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
            	display: none;
            	float: left;
            	width: 100px;
            	clear: both;
            }
            ul.sub-menu a {
            	background: none;
            	font-size: 13px;
            	font-weight: normal;
            	height: 20px;
            	line-height: 1.5em;
            	padding: 10px;
            	color: #444;
            	float: none;
            }
            ul.sub-menu a:hover {
            	background: none!important;
            	color: #000;
            }
            .menu li#menu-item-9:hover, .menu li#menu-item-14:hover {
            	background: url(../../../images/Dropmenu.png) no-repeat 0 10px;
            }
            .sub-menu li:hover,
            .menu li:hover .sub-menu a {
            	background: none;
            	color: #444;
            }
            .menu li:hover .sub-menu a:hover {
            	color: #000;
            }
            .menu li:hover .sub-menu {
            	display: block;
            }
            .menu li:hover a,
            .menu a:hover,
            .menu li.current-menu-item  a,
            .menu li.current-menu-parent a {
            	color: #000;
            	background: url(../../../images/Home2.png) no-repeat 0 0;
            }
            .menu .current_page_item  a,
            .menu .current_page_ancestor a {
            	font-weight: bold;
            }
            

            The only CSS rule that would have issues is the li:hover, which is not recognised by older versions of IE (7 and below – unless using a STRICT doctype). You can get around this by using jQuery to add a “hover” class to the li tag if necessary.

            hope that helps

  • Hi Lee

    I’m using your mega menu, and have got active highlighting working for each current menu item.

    However, for single blog posts, search, archive etc, I lose the active highlighting for the ‘blog’ parent item.

    Is there an easy solution for this?

    • Hi,

      Try using “current_page_parent” for highlighting the blog item

      • Nice one Lee. Many thanks.

  • Hey Lee, the Structure works fine. But after a few hours of testing I must admit I have major CSS problems. Therefore I would like to accept your offer to check my CSS. I will send you the file. Many thanks in advance! All the best, Jan

  • Ohh, sorry … The HTML tags disappear. So it’s not very readable now … :( … when I speak about nested, it’s the list tags.

    • The structure should be correct then if created by the admin system.

      If you have problems with the CSS let me know

  • @Lee: Yes, I created now one single menu via the admin menu. And I styled (not finished yet) the nested like you described. So I don’t have two different navigation lists like before but one nested one with crazy CSS (because is horizontal and the second … ist vertical :)

  • Hello Lee, sorry it’s me again. But I solved my problem now. Big thanks for your inspiration. I think it’s not the best solution but I build a nested like in your example. And with the help of css I shoved the 2nd menu to left with a negative margin and styled it as a vertical list. *Phew* … I hope wordpress will make this kind of menu action more easy in the next update.

    • Hi Jan – can’t you just create one single menu via the menu admin system?

  • Hello Lee, many thanks for your quick answer. Really helpful. I’ll try out your solution now. If you don’t mind can you have a look at my screenshot? http://www.i64.de/test/screenshots/screenshot-01.jpg
    Do you think your system works here? At the moment I don’t see how I can solve my problem because my two navigations are separate. How can I write the UL and LI correctly for this although the menus are in different areas?

  • Great explanation. Thanks for sharing! One question: Is your solution working when the 2nd sub-menu is somewhere else on page like in the sidebar and the main navigation is on top in the header?

    • Hi Jan – the CSS naming system applies to any menu generated by the WordPress custom menu system, including if the item appears in multiple menus. The only time WordPress wont/cant add a current-menu-item class is if the menu item is created from a custom link

  • Thanks a lot! This really helped!

  • you’re my hero, fantastic post!
    You’ve solved many problems, thank you!

    • Mattia – glad it helped