How to Add More Navigation Menus to your WordPress Theme

Sometimes you may find an awesome theme only to realize it would be great if it had an extra navigation menu with important or frequently used links to increase the usability of your WordPress site.

With just a little bit of coding you could have the foundation of your new menu set up quickly, and ready for you to style to match your theme.

If you would rather not mess around with code, there are many plugins that can do the heavy lifting for you, and also provide styling options. This goes double for our Upfront theme framework.

No matter which option you choose, the guide below will help you make it happen.

Basic Housekeeping

To create a new menu you need to edit your theme files. Before making changes to any of your core files, it’s best to backup your entire site in case something goes wrong along the way. You’ll be able to restore your site quickly and it will be as though nothing ever happened.

You can manually backup your site via FTP or using a plugin, such as our very own Snapshot or something like BackWPup. Just be sure you save a copy of both your database and files in a location separate to your site to minimize the risk of losing your backup.

Constructing a Child Theme

To create new menus with code, you need to make changes that would be lost when you update your theme. Creating a child theme takes care of this issue.

You can find the details you need to create a child theme by checking out a couple of our other posts How to Create a WordPress Child Theme and How to Automagically Create Child Themes in WordPress.

You can also choose to create a whole new theme of your own or try it out on a local or test site.

You can check out these posts for more details on how to create a local install of WordPress:

Once you have set up one of these options, you’re free to start creating your extra navigation menus. Though, if you decide to use a plugin or Upfront, you don’t need to create a child theme.

Creating New Menus

To add a selectable menu location option in your admin dashboard under Appearance > Menus you need to do what’s called “register a menu.” All it takes is adding a snippet of code to your functions.php file located in wp-content > themes > your-theme.

In cPanel, click on the File Manager icon in the Files section on the homepage. If you haven’t previously set your File Manager to load to your site’s document root, navigate there now.

There’s a functions.php file in your /wp-includes/ folder, but that’s not the one you need to edit. Make sure you find the functions.php file that’s found in the theme you’re using. Otherwise, you would end up with errors when trying to add the code found later on.

Locate your functions.php file and click on it once followed by clicking the Edit button at the top of the page.

The File Manager in cPanel. The functions.php file has been selected.
You can edit your theme’s functions.php file directly in cPanel.

If a pop-up opens, simply click the Edit button at the bottom, right-hand side. You may not see one if you have previously disabled it.

Scroll to the bottom of the file. If you’d like to add only one menu, add the following code on a new line:

In this example, New Menu is the name that will appear in your admin dashboard’s menu page to make it understandable for human eyes. The new-menu name is what WordPress will understand to execute your code properly.

You can call your menu whatever you like, but make sure only the human-readable name contains spaces and capital letters.

If you would like to add multiple menus to your site, add this code on a new line instead:

You can add as many new menus as you’d like with this method. The same rules will apply when naming them.

Save the changes you made to the file. Now all that’s left is adding the new menu to your site.

Adding Menu Locations to Your Theme

This is where you need to decide where you’d like to place your menu. If you’d like your menu to appear at the top of your page, you’ll need to edit the header.php file. You can also put it in your footer which means you would edit the footer.php file.

You can even display a menu on a page by editing its template file or to a sidebar, editing its sidebar.php file.

You can place your new menu where ever you’d like. Here’s the minimum amount of code you need to add to any of these locations:

Just replace new-menu with WordPress-readable name you chose. You probably want to style your menu with CSS so it goes beyond basic functionality and also looks great. To do this, you’ll need to create a class and add it to your theme with the following code.

Just like before, replace new-menu with the name you chose. In this example, I named the class I created new_menu_class. You can change this, but just be sure to update this code to reflect the adjustment.

Hit the Save button and head over to Appearance > Menus in your dashboard. You’ll notice your new menus will be listed under Theme Locations in the Menu Settings section.

The Menu Settings section.
The new registered menu items listed in the Menu Settings.

You’ll now be able to see your new menu locations listed. When you add a menu, you can select one or all of the locations.

To have links displayed in your newly made menu locations, click create a new menu at the top of the page.

The Menu page in the admin dashboard.
You can click the create a new menu link or enter a new name for your menu.

If you don’t already have a menu, you can enter a name for your menu in the field on the page, then click Create Menu. If you already have a menu previously created, you can click the create a new menu link toward the top of the page.

Once you have created a new menu, you can also manage the locations where they are displayed under the “Manage Locations” tab.

Styling, Plugins and Responsive Menus

Your new menu is now ready to be styled using CSS. The coding required is specific to the theme you’re using so I won’t go into it in this post, but we do have another post you can check out for that called How to Create an Awesome Responsive Menu for Your WordPress Theme. It also shows you how to create responsive menus that are mobile-ready.

If you would like an easier option, there are many plugins that will create responsive menus based on your theme’s styles. The best ones I found were Responsive Menu and Suppamenu Lite.

Some notable mentions you may also find helpful are ShiftNav, WP Responsive Menu and Max Mega Menu.

Adding Menus in Upfront

There’s also another way you can intuitively create and style menus and that’s with Upfront.

Upfront is our infinitely customizable, drag and drop theme framework. You can choose from a number of premade themes, then customize them as you see fit, even if it’s 100% different than the original.

It’s different from other theme frameworks because you can make a professional, robust theme, all by dragging and dropping elements directly onto the page and you can also see what it looks like right away.

You can add many advanced elements such as forms, image galleries, sliders, video backgrounds and parallax, and you can optionally customize it further with some CSS and Javascript if you want.

Creating a responsive site is also easy to do and if you’re a developer, you can set permissions so your clients can’t accidentally break their sites. We’re also constantly developing and adding new features to make the experience even more intuitive.

Upfront is also included in a WPMU DEV membership along with everything else we have to offer, including technical support and all our plugins. You can also try it all out for free with our 14-day trial if you don’t have a membership.

With our plugins, you could optimize your sites’ speed, harden your site or network’s security, compress and optimize your uploaded images automatically, backup your entire network or site and so much more. You can check them all out on our Plugins page.

Getting Started

Once you have Upfront and a theme installed and activated, you can start adding your menus. For more details on installing and activating Upfront, you can check out the Usage tab of one of the Upfront starter themes.

Adding a New Menu

Start by clicking the Upfront button in your admin bar to load up the Upfront editor.

The Upfront button in the admin bar.
Click the Upfront button to start up the editor.

Once the editor loads, you can either customize the menu that’s already in your starter theme or you can create a new one.

For details on how to change the existing menu and for the basics of editing with Upfront, you can check out our seven part post series starting with The Basics, Theme Colors and Typography.

To create your own menu, hover over a background region and click the pencil button that appears in the corner on the right hand side.

The region button at the top of the page in the Upfront editor.
You can edit any region on the page.

You can choose this button for any region where you want your menu either above or below it as well as to the left or right. Next, select one of the addition symbols to place your new region.

The plus sign at the top, bottom, left and right places the new region before the current one on the side where you clicked the button.

The edit region main settings.
You can place a new region to the left and right as well as on the top or bottom.

The Parrot theme in these examples already has a menu on the left so there isn’t an addition symbol displayed on that side.

Once one of the buttons have been clicked, you should see a pop-up appear to name your new region and soon-to-be menu. The field on the left can be used to create a new region whereas the dropdown field on the right can be used to select a pre-existing menu.

The region pop-up.
You can create a new region or select an existing one.

Select the radio button on the left or enter a name for your new region on the left to select that option.

If you want this region and your new menu to be displayed on all pages of your site, select the Make this a Global Region checkbox. Otherwise, the new region would only appear on the page you’re currently editing.

Once you’re done, click the OK button to create your new region.

Your new region should be displayed and you can click and drag the rectangular button centered at the bottom of the region to resize it and adjust its height.

A region being resized.
Drag and drop the resizing button to adjust the height of the region.

When you’re happy with the region, you can click the green gear icon on the right to access custom options including picking a background color and adjusting padding. You can learn more about these settings by checking out our post Upfront Part 2: Structuring Your Site with Regions.

I’m going to change the background color to a charcoal gray, but you can customize your region the way you want. When you’re done, click the Finish editing background button.

Next, locate the menu element button displayed on the left-hand side of the editor’s menu. Click and drag it to where you want your menu to be displayed.

The menu element button on the left.
Click and drag the menu element where you want it to appear on the page.

You can choose to create a menu on a region on the top of the page as I have or you could use this same technique to display links in the footer or any other kind of menu you need on the page and on your site.

When you have included the menu item in a region, settings should appear. You can either select a pre-existing menu from the drop down box or enter a name to create a new menu.

The menu element options.
You can choose a pre-existing menu or create a new one.

If you choose a menu, it loads for you automatically. If you create a new menu, some buttons are displayed, centered at the top of the region.

In the image above, you can see the addition symbol which you would click on in your site to add a new menu item. The button beside it adjusts the padding and the gear icon has additional settings.

Click the gear button to reveal important settings on the left in the editor’s menu. Click the Add item button to create your first link in the menu.

A new menu item has been added.
Click the Add item button to create a new link.

Double click the link to change the text from New item to whatever you need it to say. Even though your link is displayed, it doesn’t have a location attached yet so clicking on it won’t do anything.

To attach a link to the item you added to the menu, hover over the text and click the ellipsis button. Click the link button to show a drop down list of your options.

Adding a link to an item.
You can add many different types of links.

You can choose from many different link options:

  • URL
  • Post or page
  • Anchor
  • Lightbox
  • Email

Some additional options may also appear that you can adjust as needed. When you’re done, click the OK button to finish creating your first link. You can click the plus button in the menu area to add another item and repeat these last few steps to add a link to them.

You can also add the styles you need to your new menu by clicking the gear icon displayed in the menu element, then click on Appearance, then on the drop down box.

The Menu Appearance settings.
You can change the styling of your menus in the settings.

You can either click a pre-existing style or create a new one by entering a name for it, then clicking Add. If you choose to create a new style, the name shouldn’t include any spaces and should be named the same way you would a CSS ID or class.

When you create a new style, options are then displayed for you to choose from including font, sizing, color, hover styles and more.

The menu styling options.
You can instantly style your menu the way you want without coding.

You can also customize your menu even further if you want with your own CSS. This isn’t necessary, but sometimes you may want to add a little something, something.

Toward the bottom of the editor’s menu on the left, you should see the Edit Preset CSS. Click on it to open the CSS editor and add what you need.

The menu styling settings.
You can choose to add your own custom CSS code if you want.

If you add your own custom CSS, be sure to click the Save button in the code editor so your changes are saved. When you’re done adjusting all the styles you need, click the Save Element button at the bottom of the editor menu to save your styles.

Your new menu should be styled, setup and ready to go, but don’t forget to click the Save button in the main editor. Otherwise, your new menu and any other changes you have made aren’t going to be saved when you navigate away from the Upfront editor.

Resources for Going Further

You now have the solid foundation you need to create additional menus for your theme and resources to help you go further. Whether you code it yourself, use a plugin or add one in Upfront, you now have a new menu on your WordPress site.

If you run into troubles using Upfront, go ahead and ask our support heroes. They can give you expert advice and support to help solve just about any problem. You can open a ticket in our support forum and we’ll be right along to help you.

For more information on how to style your new theme, there are many resources you can check out and you can find them all in our post A Mega Guide to Learning and Referencing CSS for WordPress: 150+ Resources.

You can also check out some of our other posts 10 Simple Tips for Learning CSS for WordPress, 25 Expert Tips for Cleaner CSS Coding for WordPress, 25 Pro Tips for Improving Your CSS Workflow and 5 Free CSS Plugins for Live Editing Your WordPress Site for more details on coding some CSS for your theme.

What kind of menus would you like to create? Feel free to share them in the comments below. VIEW 34 comments

– Interested? –

Try out 100+ Premium Plugins, Upfront Themes, WP Defender, Hummingbird Performance, 24/7 Expert WP Support, Snapshot Backups & more - FREE for 14 Days

START FREE TRIALLEARN MORE

34 Responses

    Rahul

    Hi Jenni !

    Thanks for this useful post. To be very frank, I was looking for such useful resources as being a non-coder it was impossible for me to add some extra navigation menu to my theme.

    This post not only help me to know that it can also be done easily using WordPress plugins but also helped me to try some basic coding.

    However, I would further like to know how to edit menu text sizes to be suitably customized in navigation bar ?

    Waiting eagerly for your response.

    Jessica

    Hi! This is exactly what I needed :) However, whenever I added a functions.php and a header.php to my child theme, my site wouldn’t come up.

    What I did was copy the parent functions.php and header.php and added in the code like you said. I uploaded those new files to my child theme, and that’s when it broke. The code works perfectly in the parent theme. Thoughts?

    Thanks for any help! And thank you for this wonderful tutorial!

      Jenni McKinnon

      Hey Jessica,

      I’m sorry to hear it didn’t work for you! Without seeing the files, it’s difficult to assess exactly what’s going on, but I can give you a few suggestions:

      1. Make sure you re-upload the files in the same folder you downloaded them from. If you place them in the wrong folder, it will break your site.

      2. Make sure your code in the functions.php file is separated like a whole paragraph. There should be a whole line that’s blank in between the snippets of code.

      3. If you placed code after a line that looks like this in functions.php, place it before that line:
      ?>

      4. Restore your site from a backup and try again. It may be helpful to edit the files directly in your control panel as suggested in this post.

      Let me know if any of that is helpful to you or if you need more suggestions.

      Good luck,

      Jenni McKinnon

    Julius

    This is really awesome and everything works; however, I can’t get the menu to display in the correct location. The main-menu is the location I would like to place my primary menu unfortunately, I can’t find how to do this. I have searched the functions.php and the header.php to change the “main-menu” location to the primary menu rather than the main menu.

    Can anyone make sense of this to me?

      Jenni McKinnon

      Hey Julius,

      If you just want to replace your current header menu with your new one, you don’t need to do extra coding. Go into your admin dashboard > Appearance > Menus. Click the “Manage Locations” tab at the top and beside “Primary Menu,” select your new menu from the drop down list, then click “Save Changes” at the bottom. That should do the trick.

      Hopefully that answers the question you’re asking. If not, let me know and I’ll try again. :)

      Cheers,

      Jenni McKinnon

    Stephane

    Hi Jenni.
    I am not a designer / developer. I use the Divi theme to build (or try to) my own site, amourdesthes.com
    I wish to have a secondary header menu to list all my product categories. So my, the only solution is to separately insert a menu on every page. I would rather use your solution. However, I cannot complete the menu location part. I would also like the secondary header menu to be sticky and reduce upon scrolling, like the main header menu does. Can you help me?
    Thanks
    Cheers
    Steph

    Kenda-Ruth

    I am having the same issue. I have used a plugin to build a child theme and added the code to the functions.php file, but I do not know how to select the location.

    My theme only allows for one menu at the very top and I want my main menu directly below my header/banner image. What is that location called–is it still part of the header, but the bottom?
    Is the banner different from the header?
    How do I make sure that it is lined up precisely so it is like the bottom of the banner?

      Jenni McKinnon

      Hey Kenda-Ruth,

      I hope I understand what you need (and if not, let me know), but once you register the menu, you can select it in the admin dashboard under Appearance > Menus.

      Once the menu is registered, you can add the additional code I mentioned in the file where you would like it to appear. In your case, you can add it to your header.php file.

      In terms of header and banner, I think it depends on who you speak to, but generally, the header is the top of the page where your site’s logo and tagline appears. The part below that where your posts and page content appear is called a body container, main container, content area or other names along these lines. A banner, in my experience, usually refers to advertisements, such as in “banner ad” where the ad is rectangle in shape. It might certainly differ from person to person, though.

      As I mentioned to Steph, we do have a theme called Upfront that’s completely customizable and editable on the front end. It’s as easy as dragging and dropping the elements that you would like to display right onto the page. It doesn’t require coding unless you would like to customize elements further with CSS or HTML. If you would like to read more about it, you can check it out here: https://premium.wpmudev.org/projects/category/themes/

      We also have several posts on how to use Upfront that you can check out to see if it’s something you would find helpful and to also help familiarize yourself with it more:

      1. https://premium.wpmudev.org/blog/upfront-basics/
      2. https://premium.wpmudev.org/blog/upfront-regions/
      3. https://premium.wpmudev.org/blog/upfront-custom-css/
      4. https://premium.wpmudev.org/blog/upfront-responsive/
      5. https://premium.wpmudev.org/blog/upfront-pages-posts/
      6. https://premium.wpmudev.org/blog/upfront-elements/
      7. https://premium.wpmudev.org/blog/upfront-plugins/

      Let me know if you need any more help with this and I’ll be happy to do what I can. :)

      Cheers,

      Jenni McKinnon

        Kenda-Ruth

        Thanks for your response. But I don’t think I’m understanding well.
        First, I am using the Social Triggers theme for the Zippy Courses plugin because it is built for the plugin with e-courses in mind. They say it is not a requirement, but that it makes things easier and I did try the theme I usually use and like and almost immediately realized I had to go back to trying the theme they recommend.

        What does it mean to register the menu? I have tried adding the code to the header file and to the functiosn.php file–I tried a few different things before posting. But I can’t see how that can select the precise location anyway–rather it seems adding it to the header file would select the general regions, but not tell it where within that region to place the menu.
        When I tried the code in the header file it came out like a vertical list and it strayed well below the header area–though perhaps because it was vertical.
        Right now I have the code in functions.php and nothing shows up.

        My main site is not on WP and the menu location is set (in CSS) by telling it how many pixels from the top. I’ve found no instructions for a WP menu telling me to specify in that manner; though that is precise.

        When I go to appearance–> menu I can select the menu I have created and assign it the location–and it is the location that I created with the code. But what does that really mean–since I have not told it precisely (such as with coordinates) where to go?

        So right now I have the menu called Above Header assigned to the original defalut theme location at the top. This is meant to be login/out and register type buttons and later (I’m just building) maybe some buttons specific to members within the site.
        The other menu I have titled ‘All-Site Navigation Menu’ because it is meant to be the same as at my blog and my main site and I called the new location (in the code) ‘Below Header Menu’. I also added a few more in case I want to add more menus someday.

        Here is the code–it looks like I added a few things at different times as I was trying over a couple of days.

        function register_my_menus() {
        register_nav_menus(
        array(
        ‘below-header-menu’ => __( ‘Below Header Menu’ ),
        ‘extra-menu-1’ => __( ‘Extra Menu 1’ ),
        ‘extra-menu-2’ => __( ‘Extra Menu 2’ )
        )
        );
        }
        add_action( ‘init’, ‘register_my_menus’ );

        add_action(‘__header’, ‘below-header-menu’, 1000, 0);

        function display_secondary_menu() {
        echo ( has_nav_menu( ‘below-header-menu’ ) ? wp_nav_menu (
        array (
        ‘theme_location’ => ‘below-header-menu’,
        ‘container_id’ => ‘below-header-menu’,
        ‘container_class’ => ‘below-header-menu’
        )
        ).” : ” );
        }

          Jenni McKinnon

          Hey again Kenda-Ruth,

          By the sounds of it, the code worked and the menu showed up. Now all you have to do is style it with CSS as I mentioned at the end of the article. The menu should appear horizontally (or vertically) instead of as a list at that point. You can also get the exact positioning you desire that way.

          There are many great places online to get info on how to code with CSS and here’s one of them:http://www.w3schools.com/css/

          I see that you’re a monthly subscriber and that means you have access to all our plugins and themes which means you could use our super easy CoursePress Pro plugin to easily create online courses. Setup just takes a few minutes, if that. You’ll also have access to our new Upfront theme that has a drag and drop front end editor, which means no coding — unless you want to add extra CSS or HTML for an ultra specific look. You’ll be able to add and style extra menus in just a few clicks. If you would like more information about them, here it is:

          CoursePress Pro: https://premium.wpmudev.org/project/coursepress-pro/

          Upfront: https://premium.wpmudev.org/projects/category/themes/

          This might be an easier solution for you, but you can check it out yourself to be sure.

          Hope that helps. If you have anymore questions, don’t be afraid to hit the “reply” button. :)

          Cheers,

          Jenni McKinnon

            Kenda-Ruth

            Thanks so much Jenni.

            I had removed the code from my header since I was trying various things and I put it back and now have the vertical list of my menu items.

            I have a ‘top-nav class in the CSS for my main site and am trying that in my style.css.

            So the class name is ‘top-nav’
            The name of the menu location I regstered is ‘Below Header Menu’

            I took this code from the instructions: ‘new-menu’, ‘container_class’ => ‘new_menu_class’ ) ); ?>
            and input my names so it looks like this:
            ‘below-header-menu’, ‘container_top-nav’ => ‘below_header_menu_top-nav’ ) ); ?>

            And then put that in the header.php file. Was that right?
            Was I suppsed ot put ‘header.php’ where it says ‘theme-location’?
            And what about that part where it says ‘container-class’?
            Was I suposed to remove the word ‘container’ ? That sounds like such a silly question to me, but I am just not sure if that word part of the code and not a name–though I guess you had it in quotes which implies it’s something I need to change.

            I just tried it with the word ‘container-‘ removed nad saw no difference upon refreshing.

            I know that my css from my main site will not fit perfectly with my blog, but my hope is that it can be a starting place if I can just get the code that points to the CSS correct. But if the code pointing to it is correct, then I guess I’m lost.

            Kenda-Ruth

            Okay, sorry…I figured it out. I was confused when I saw things inside quotes because I thought that was where I had to add something specific and thus did not realize that theme_location and container_class were showing an equals and pointing to my specifics. Once I figured that it came quickly.

            I’m now fine-tuning–such as getting my nav bar the same length as my header.
            The issue I am having is precise positioning. I got it perfect–just below and touching the header on one page (an e-course page), but then on a different page–dashboard I think–the menu was in the middle of the header. The funny thing is that viewing the pages side-by-side I cannot see that the header is any higher or lower on one page than the other, so why is the menu different? But what would really be best is if I could somehow code it to be stuck to the bottom of the header so that if the header does change slightly on different pages, the menu will move with it.

            Also…when I reduce my window–such as to view others side-by-side–the menu breaks up and shifts location. I guess attaching it with code to the header might at least stop it from moving into or down from the header and it being split onto two levels is not awful for such situations. Though maybe that is something that being responsive would remedy?
            The theme is pretty updated, how do I know if a menu is already defaulted to be responsive in the theme. I don’t really use a cell phone (emergency only) and so I don’t have an experiential understanding of the needs.

          Jenni McKinnon

          Hey,

          If you need to check if a site is responsive, but you don’t have a mobile device where you can check, first, try resizing your browser window. If the Content adjusts to fit the size of your screen, then that’s usually a pretty good indicator.

          You can also look at your site through a mobile device online by going to sites such as:

          1. http://mobiletest.me/
          2. http://www.mobilephoneemulator.com/
          3. http://quirktools.com/screenfly/

          As for your styling questions, it’s difficult to give you specific directions since I can’t see your site or your code to put it all into proper context. It looks like you have a membership here from what I can tell so I suggest asking your question in the support forum. They should be able to help you further since they can access your site with your permission once you allow it in your dashboard. Then they can see the full picture and help you out.

          Also, so sorry for the late reply. I must have missed the notifications for this post somehow.

          Good luck,

          Jenni

      Jenni McKinnon

      Hey Daniel,

      I’m sorry for the late reply. It seems as though I must have missed the notification for this message.

      After you register your menu, you need to add the code you mentioned to the pages where you want the menu to appear, for example, the footer.php, page.php, header.php or other similar pages.

      If you need more specific details, they’re in this post and the code you’re referencing is under the Adding Menu Locations to Your Theme heading.

      Hope that helps.

      Cheers,

      Jenni

    Jukka

    Hi, Great post! I haven’t found any solution for my problem. I want to use same place for my navigation menu but I just want to change that menu on another page. I have made site for sport team and they have first team, ladies, youngsters etc. and they want different menus for each one. I have cloned the front page for every one and now I have to find how I can do their own menus?

      Jenni McKinnon

      Hey Jukka,

      Depending on the changes you want to make you may need to create some extra CSS styles for each menu if you want to change the menu design. If you want to change the menu’s content, you need to register a new menu, add it to your theme, then select the new option when creating a new menu in your dashboard under Appearance > Menus. Rest assured, the specific instructions to do all this in in this post.

      Good luck,

      Jenni

    Kenda-Ruth

    Sorry, but I’m still having a problem.
    My menu has the right colors–static and hover. It is the right height and almost the right width–I want it to span the header image and right now it is in a bit on both sides, so I need to figure that out.
    But the biggest problem is its location. It changes. On most pages it is one way and on the e-course pages it is lower–there could be other pages I have not seen where it is also different.
    Maybe I did something wrong when setting the location?
    Here is my css:
    /*1670*/
    .top-nav {
    position: absolute;
    top: -59px;
    line-height: 38px;
    border-right: 0;
    solid #a5dcc2;
    padding: 0;
    margin: 0 auto;
    margin: 0 0;
    margin: 0;
    width: 100%;

    }
    /*
    /*1671*/
    .top-nav ul {
    position: absolute;
    padding: 0;
    margin: 0;
    }
    /*1672*/
    .top-nav ul ul {
    position: absolute;
    top: 0px;
    visibility: hidden;
    padding: 0;
    margin: 0;
    }
    /*1673*/
    .top-nav li {
    float: left;
    position: relative;
    background-color: #b7f5d7;
    list-style: none;
    }
    /*1674*/
    .top-nav ul li a {
    width: 146px;
    display: block;
    height: 38px;
    text-align: center;
    font-size: 150%;
    border-left: 1px solid #bef6db;
    border-right: 1px solid #a5dcc2;
    color: #c91640;
    font-family: Georgia, Verdana, Arial, sans-serif;
    text-decoration: none;
    }
    /*1675*/
    .top-nav ul li:hover {
    background-color: #82bfa2;
    text-decoration: none;
    }
    /*1676*/
    .top-nav ul li:hover ul {
    visibility: visible;
    z-index: 100;
    }
    /*1677*/
    .top-nav ul li:hover ul li a {
    border-bottom: 1px solid #a5dcc2;
    background-color: #b7f5d7;
    text-decoration: none;
    z-index: 100;
    }
    /*1678*/
    .top-nav ul li ul li a:hover {
    background-color: #82bfa2;
    text-decoration: none;
    }
    */

    .top-nav{
    position:absolute;
    top:215px;
    /*left:8%;*/
    padding:0;
    margin:0;
    border-right: 0px solid #A5DCC2;
    margin-left: 5px;
    margin-right: auto;
    }
    .top-nav ul{
    padding:0;
    margin:0;
    line-height:38px;
    }
    .top-nav li{
    position:relative;
    float:left;
    list-style:none;
    background: #B7F5D7;
    /*border-radius:5px;*/
    }
    .top-nav ul ul{
    position:absolute;
    visibility:hidden;
    padding:0;
    margin:0;
    top:30px;
    }
    .top-nav ul li a{
    text-align:center;
    font-family: Georgia, Verdana, Arial, sans-serif;
    font-size:65%;
    color: #C91640;
    width:128px;
    height:38px;
    display:block;
    text-decoration:none;
    border-left: 1px solid #BEF6DB;
    border-right: 1px solid #A5DCC2;
    }
    .top-nav ul li:hover{
    background-color: #82BFA2;
    /*Color of main menu item when hovered over.*/
    text-decoration:none;
    }
    .top-nav ul li:hover ul{
    visibility:visible;
    z-index:1;
    }
    .top-nav ul li:hover ul li a{
    background: #B7F5D7;
    /*Background of dropdown when hovering on main menu item for sub.*/
    z-index:1;
    border-bottom: 1px solid #A5DCC2;
    /*opacity:0.9;*/
    text-decoration:none;
    /*border-radius:5px;*/
    }
    .top-nav ul li ul li a:hover{
    background-color: #82BFA2;
    /*I cannot find what this does—as it does not change the background of the dropped down item when I hover over it.*/
    /*opacity:0.8;*/
    text-decoration:none;
    I have tinkered with top: 0px;

    On my main site where I use this code the top (I assume) is being measured from the top of the website, but in this site it is not working like that. How do I fix this?
    It seems that it is measuring from some other point … fixed point? But what? And Why? How do I get it measured from something that includes or is somehow relative to the header so that it is consistent on all pages? And then, how do I get it to span the entire width of the logo image?
    Also, the drop down menu has spaces between each item…why and can someone help me fix that?

      Kenda-Ruth

      Corrected Code–problem not solved, I’ve just been working so much with testing different code variations, that I had two in there at once.

      /*1670*/
      .top-nav {
      position: absolute;
      top: -59px;
      line-height: 38px;
      border-right: 0;
      solid #a5dcc2;
      padding: 0;
      margin: 0 auto;
      margin: 0 0;
      margin: 0;
      width: 100%;

      }
      /*
      /*1671*/
      .top-nav ul {
      position: absolute;
      padding: 0;
      margin: 0;
      }
      /*1672*/
      .top-nav ul ul {
      position: absolute;
      top: 0px;
      visibility: hidden;
      padding: 0;
      margin: 0;
      }
      /*1673*/
      .top-nav li {
      float: left;
      position: relative;
      background-color: #b7f5d7;
      list-style: none;
      }
      /*1674*/
      .top-nav ul li a {
      width: 146px;
      display: block;
      height: 38px;
      text-align: center;
      font-size: 150%;
      border-left: 1px solid #bef6db;
      border-right: 1px solid #a5dcc2;
      color: #c91640;
      font-family: Georgia, Verdana, Arial, sans-serif;
      text-decoration: none;
      }
      /*1675*/
      .top-nav ul li:hover {
      background-color: #82bfa2;
      text-decoration: none;
      }
      /*1676*/
      .top-nav ul li:hover ul {
      visibility: visible;
      z-index: 100;
      }
      /*1677*/
      .top-nav ul li:hover ul li a {
      border-bottom: 1px solid #a5dcc2;
      background-color: #b7f5d7;
      text-decoration: none;
      z-index: 100;
      }
      /*1678*/
      .top-nav ul li ul li a:hover {
      background-color: #82bfa2;
      text-decoration: none;
      }

        Jenni McKinnon

        Hey Kenda,

        It’s difficult to say for sure since I can’t see your site and what exactly is happening as a result.

        The top nav clas doesn’t necessarily mean it has any relation to the top of the page. That’s the name the theme creator gave that code to relate to something in the theme, quite possibly the menu toward the top of the page (instead of the bottom, for example).

        My advice here would be to post your question in the forum and our support team can take a thorough look and help you out there since you have a subscription.

        Good luck,

        Jenni

      Jenni McKinnon

      Hey Rui,

      Sorry for the late reply. I think I missed the email notification on this one.

      To answer your question, if you have a blog on WordPress.com, then you do not have access to the files required to make these changes. You need to have a self-hosted WordPress site (downloaded from WordPress.org and installed on your own hosting plan) in order to make these changes as it’s not possible with a WordPress.com blog.

      Good luck!

      Jenni

    Marek

    Hi Jenni,

    Thanks for a great tutorial – I’m just a beginner with the WordPress and its customization.

    I managed to create an additional menu for 5 popups/modals on a website I’m updating and customizing, it’s here: http://sg.terrybraunstein.com/events-news/ – the added menu is just above the top thin line, ‘Photography’, ‘Artist’s Books’ etc. but it’s vertical. I managed to place it flash right, but cannot find any way to get the individual menu items stay horizontally, one after the other just above the line. How can I do that?

    Also I must mention the way I made the changes in the php files that you are mentioning above and that I uploaded to the child theme. In the phunctions.php I just have the section that you mentioned above and nothing else.
    In the header I added to the parent theme’s header the line you gave above but had to keep everything else intact, otherwise if I remove most of the other lines of code, the logo and the main menu disappears.
    In the page.php I also had to keep everything intact and just add your line from above.
    Is that how it should be?