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.
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:
- Go to Appearance > Widgets
- Drag a Custom Menu Widget to the Footer 1 widget area.
- 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.)
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.
Leave a Reply