Add Expanded Primary Navigation Menu to Genesis Footer

If your website has a large drop down navigation menu, you may want to display it in the footer, so that it’s available at both the top and the bottom of your website pages. The footer menu can be left expanded.

genesis primary menu inline in footer

You could use several widgets with menus in your footer, one for each top menu item. But this tutorial will show you how to use your main or primary menu in your footer, and style it so that it displays with sub-menu items below each top menu item, like in the image above. The details are for the Genesis sample theme (Genesis Sample 2.1.1), but you can apply this to any child theme.

OK, so let’s get started. All the code is in the GitHub Gist – Add Expanded Navigation Menu to Genesis Footer

Step 1. Create One Large Widget Area in Your Footer

Most Genesis child themes have three footer widgets. The first thing you need to do is edit your functions.php to create only one large footer widget.

Open your functions.php in a text editor and find this section:

//* Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );

Change the 3 in this line to a 1, so it looks like this:

//* Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 1 );

Then do the following:

  1. Go to Appearance > Widgets
  2. Drag a Custom Menu Widget to the Footer 1 widget area.
  3. Use the select drop down to select the menu you want in your footer, in this case, the menu is called “Primary Navigation”.

Step 3. Look At Your Source Code

This step is only needed, if you want to know what you’re actually going to style. If you look at the source of your added menu, you will see something like this. (You can use Firebug or Chrome Developer tools to view your source. If you don’t know how, you can search or just move on to the next step.)

footer menu html

Your menu may have some different classes, depending on the menu you added. So we want to choose to style the classes common to most themes. In this case, you need to add some styles to .footer-widgets-1, .menu, and .menu-item.

Step 4. Add Styles to Your Footer Menu

Open style.css in a text editor. Go to the bottom of the main section of style.css – just above the @media sections. Begin a new section called Footer Menu.

1. The first thing you need to do is to make .footer-widgets-1 full width.

/* Footer Menu
----------------------------- */

.footer-widgets-1 {
    width: 100%;
}

2. Next you want to add some stlyes to the top menu items, so use .footer-widgets-1 .menu > .menu-item

.footer-widgets-1 .menu > .menu-item {
    border-bottom: 0; /* removes dotted border-bottom */
    display: inline-block;
    float: left;
    font-weight: 700; /* makes top menu items bold */
    margin-left: 2.564102564102564%; /* column grid margin */
    vertical-align: top; /* aligns menu items at the top */
    width: 23.076923076923077%; /* column grid for 4 top menu items */
}

Most of the lines are commented. For this example there are 4 top menu items – Sample, Layout, Templates, Contact. You may have more or less top menu items. The width and the margin-left are taken from the Column Classes section of your child theme. These may be different for your child theme. This example used the margin-left and the width for the .one-fourth element. If you have 6 menu items, you would choose the margin-left and the width for the .one-sixth element.

This example makes the top menu items bold; you could make them a larger font size, if you preferred. Just add font-size: 18px; or font-size: 20px;, depending on the default footer-widgets text size for your child theme.

2a. Added 02/01/16 Then you want the sub-menus to be always expanded; you can do this by adding a display: block; to the all the ul selectors.

.footer-widgets-1 .menu .menu-item ul {
	display: block;
	margin-top: 6px;
}

3. Then you want to remove the margin-left from the first top menu item.

.footer-widgets-1 .menu > .menu-item:first-child {
    margin-left: 0; /* removes column grid margin on first top menu item */
}

4. List items are indented in the Genesis Sample theme. If you don’t want your sub-menu items indented, then add this.

.footer-widgets-1 .widget li li {
    margin: 0; /* removes indentation on sub-menu items */
}

5. And then you need to remove some of the styles you added for the top menu items from the sub-menu items. You may also want to include a smaller font-size.

.footer-widgets-1 .menu .menu-item .menu-item {
    display: block; /* sub-menu items are block */
    font-weight: 300; /* normal weight sub-menu items */
    width: 100%; /* sub-menu items are full width */
}

6. Now you need to add some styles for the @media sections. You can just copy and paste the code below to the very bottom of your style.css or you can add the CSS inside each @media section to the bottom of the appropriate @media section in your child theme. Note that your @media sections will most like have different break points (widths) than this example.

@media only screen and (max-width: 1200px) {

    .footer-widgets-1 {
      padding-left: 30px;
      width: 100%;
    } /* add to bottom of 1200px @media section */

}

@media only screen and (max-width: 800px) {

    .footer-widgets-1 .menu > .menu-item {
      display: block;
      float: none;
      margin-left: 0;
      width: 100%;
    } /* add to bottom of 800px @media section */

}

Note that if you are using a child theme from before Genesis 2.1.1, you would use
@media only screen and (max-width: 1139px) {
instead of
@media only screen and (max-width: 1200px) {.
And you would use
@media only screen and (max-width: 767px) {
instead of
@media only screen and (max-width: 800px) {

Now you have a nice expanded navigation menu for your Genesis child theme. You can add some more styling, if you like.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

4 responses to “Add Expanded Primary Navigation Menu to Genesis Footer”

  1. Chip says:

    Hi Marcy, I am really trying to get this to work on my site. Problem is, My menus appear aligned to the left and in a vertical column. The idea is to have them line up horizontally next to one another just like your example at the top of the page here.
    Any help you can provide would be greatly appreciated.
    – Chip

    • Marcy Diaz says:

      You’ll need to look at your source code per Step 3. to see that your classes are the same as those in the tutorial. If they are not, you will need to adjust your CSS classes to match your source code. If they are the same, then you can follow the tutorial steps again. That’s the best help I can offer in a blog post. :)

  2. Aleksandr says:

    Hi Marcy,

    I’ve been following this tutorial together with the ‘Add Third or Footer Navigation Menu to Genesis Child Theme’. The tutorials are very well done, and I have a footer menu working from the other tutorial.

    My problem is how to get the menu to be in a permanently expanded state. I can’t seem to find the solution to this on either post or online (so far). Is it a CSS or Genesis setting that I need to find? I am using Genesis framework with Epik theme.

    Thank you

    • Marcy Diaz says:

      Nice catch, Aleksandr; a step was missing; I’ve added it 2a.

      You want the sub-menus to be always expanded; you can do this by adding a display: block; to the all the ul selectors.

      .footer-widgets-1 .menu .menu-item ul {
      	display: block;
      	margin-top: 6px;
      }

Leave a Reply

Your email address will not be published. Required fields are marked *