How do I get a fixed footer menu with Divi?

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

This article focuses on the following topics:

1. The prerequisites
2. Create a footer menu
3. Optimising the mobile version
4. Taking design into account

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - Prerequisites

First of all, you will need to hide the Divi main menu display as explained in this tutorial.

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

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

2 - Creating a fixed menu in the footer

1. Add a Full Screen section within your layout. You can insert it anywhere as it will not affect its final position. Within this section, insert a "Full Screen Menu" module. You will be able to choose the menu of your choice: it must have been previously created in the Appearance > Menu tab.
2. Open the Full Screen section settings by clicking on the wheel icon.
3. Add a CSS ID to the 'Advanced' tab . Enter: "ldmenu".
4. Within this Full Screen section, add a Code module.
5. Go to the "Content"tab
6. Saisissez le code CSS ci-dessous <strong>entre les balises <style> et </style></strong>

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

For more information on inserting code into DiviRead this article.

3 - Optimising the mobile version

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

However, the mobile version may not be optimal. So make sure you check the right options so that the menu is also available in the mobile version.

In the settings of the Full Screen Menu module, go to the "Style" tab and make sure that the option "open submenus" is set to " up".

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

4 - Taking design into account

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

For example, with such a menu, your credits and footer icons will no longer be visible. You will also not be able to create a footer that is revealed on scroll or other custom styles.

So make sure you make choices and don't mix everything up on the same page or site.

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

• Make the menu fixed in the footer and then at the top of the screen after scrolling
• 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 transparent menu might be of interest to you...

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!