How to get a fixed menu in footer with Divi?

Updated on 08/04/2021 | Published on 15/07/2019 | 2 comments

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.

On the agenda of this article:

  1. The prerequisites
  2. Create a fixed menu in the footer
  3. Optimize the mobile version
  4. Take into account the design
Menu fixe en pied de page avec Divi
Fixed menu in footer with Divi

Announcement: this article contains affiliate links that you will easily recognize. 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 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 footer menu

Section menu fixe en pied de page
Add a section to get 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 - Optimize 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 mobile version.

Menu fixe en pied de page en version mobile
Optimize the Fixed Menu in the footer for the mobile version

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

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

4 - Take into account the design

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 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 within the same page or site.

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

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!

menu fixe en pied de page de Divi
footer fixed menu with Divi

537 words

2

You should like it too:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images look more graphic and give your layout an original look. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this video.

2 Commentaires

  1. Laura

    Hello, merci pour ce tuto, c’est exactement ce que j’essaye de faire, pour l’affichage tablette et mobile uniquement.
    Le code n’a pas l’air de fonctionner, il s’affiche tout simplement en dur en front. Une idée du soucis ? Peut être à cause du nouveau Divi ? A savoir que j’ai utilisé la fonction theme builder de Divi et que j’ai mis ça en footer.
    Merci !

  2. Lycia Diaz

    Salut Laura, effectivement, le code que j’ai donné doit certainement être optimisé pour tes besoins, à savoir pour les version tablette et mobile. C’est certainement une histoire de CSS. Dans ton navigateur (Chrome ou Firefox), inspecte le code (clic droit > inspecter) et regarde ce qui pourrait être optimisé en termes de taille d’écran.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This