How to get a fixed footer menu with Divi?

During a previous tutorial, we saw how to fix the Divi menu at the top of the screen after the scroll of the page. In this article we will see how to get a fixed menu at footer.

In the programme of this article:

1. Prerequisites
2. Create a fixed menu at footer
3. Optimize mobile version
4. Consider design

1 – Prerequisites

First of all, you'll have to Hide the display of Divi main menu as explained in this tutorial.

Then go to the page you want to edit, the page where you want to set the menu at the footer and activate the Visual Builder.

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

2 - Create a fixed menu at footer

1. Add a Full Screen section within your layout. You can insert it anywhere because it will not have an impact on its final position. Within this section insert a module « Full Screen Menu ». You can choose the menu of your choice: it must have been created before the tab Appearance > Menu.
2. Open the settings in the Full Screen section by clicking on the wheel icon.
3. Add CSS ID to the tab "Advanced". Enter: "ldmenu".
4. Within this Section Full Screenadd one Code module.
5. Go to the tab "Content"
6. Enter the CSS code below between tags et

#ldmenu {
position:fixed;
bottom:0;
width:100%;
z-index:9999;
}

For more information about code insertion in Diviread this article.

3 – Optimize mobile version

With the previous few steps, you are in possession a fixed footer menu.

However, the mobile version may not be optimal. Please check the right options so that the menu is also available as a mobile version.

In the settings of Full Screen Menu module, go to the tab Style and ensure that the option "Opens Submenus" either positioned on "Up".

So your fixed menu will go up, in mobile version (and desktop version). This is important, otherwise the sub-elements of your menu will not be visible at all.

4 - Consider design

The sticky footer menu gives an original style to a site, however, make sure that it does not hinder your other design elements.

For example, with such a menu, your credits and Footer icons will no longer be visible. Neither will you be able to create a footer revealed at the scroll or other custom styles.

Be sure to make choices and not mix everything within a single page or site.

To go further, I propose 2 other tutorials to make the fixed menu at footer:

• Make the fixed menu by footer then at the top of the screen after the scroll
• Force the footer to go to the bottom of the screen even if the content is too small

Also, this tutorial for Create a Header Hero with a transparent menu Maybe you might be interested...

Need more resources on Divi? Visit ElegantThemes blog full of ideas and tutos!