Adding a Horizontal WordPress Menu in Footer Widget Area

Participate's Footer

At the time of writing, our site is using the popular Avada theme for WordPress, and as awesome as the theme is, there have been things that irk me.

One of these is the footer. WordPress and Avada allow for many different widgets, so you can do a lot with the theme. With a knowledge of CSS though, you can do even more. Avada is looking at updating this to their theme as a feature, so hopefully this guide will be redundant soon!

Until then, there are 2 ways to create this footer. Manually, and with an existing menu.

Manual Method

PROS CONS
Full customisation of your menu. You need to edit it each time something changes on your menu layout.

Menu Method

PROS CONS
Items will edit via WordPress Menu settings Takes a bunch of custom CSS to configure.

Avada have a great How-To if you want to create the menu manually. Visit the page in their knowledgebase to go to it.

Click Here To Go To The Avada Page On How To Insert A (Text) Horizontal Menu in Footer

How to Insert a Menu and Display it Horizontally in the Footer

Step 1 – Navigate to Avada > Theme Options > Footer > Footer Content.

Step 2 – Find the ‘Footer Widgets’ option and set it to On. Select the ‘Number of Footer Columns’ to 1. Once done, click ‘Save Changes’.

Step 3 – Navigate to Appearance > Widgets and find the Footer Widget box. As we’re only using one footer widget, select Footer Widget 1.

Step 4 (Optional) – In your selected Footer Widget box, insert an Image widget. Select your Logo or other desired image.

Step 5 – In the same selected Footer Widget box, insert a Custom Menu widget. Select your desired Menu on the ‘

Step 6 – Once you’ve finished setting up your footer, click Save.

Footer 1 Widget Settings

Custom CSS for the Footer

Step 7 – Navigate to Avada > Theme Options and select ‘Custom CSS’. Paste the code below into your CSS Code and then ‘Save Changes’.

What am I doing?

The CSS

.fusion-widget-area .widget_nav_menu li 

The li is the list items that your menu uses. We’re changing the display from ‘block’ to ‘inline-block’. This makes it display horizontally instead of vertically. Visual changes are to remove the bottom border of each menu item, as well as centering the text.

.fusion-footer-widget-area .widget_nav_menu li a:before

Now your menu should be horizontal, though I want to change the leading greater than sign “>” with a vertical line “|”.

.fusion-footer-widget-area .widget_nav_menu li:first-child a:before

Although I don’t want it before the  first menu item. To isolate it, we’re using the :first-child selector on the List item and making the element transparent.

.fusion-footer-widget-column

If you have added an image to your menu (Step 4), you’ll need to make the whole widget display as an inline-block, and then also remove the extra padding that Avada gives when more than one item is in a widget.

/* — Horizontal Footer Menu CSS START — */
.fusion-widget-area .widget_nav_menu li {
     display: inline-block;
     border-bottom: none;
     text-align: center;
}
.fusion-footer-widget-area .widget_nav_menu li a:before {
     content: ‘|’;
}
.fusion-footer-widget-area .widget_nav_menu li:first-child a:before {
     color: transparent;
}
.fusion-footer-widget-column {
     display: inline-block;
     margin-bottom: 0px;
     vertical-align: middle;
}
/* — Horizontal Footer Menu CSS END — */