How do I get a footer docker menu with Divi?

Updated on 23/07/2019 | Published on 15/07/2019 | 2 comments

In a previous tutorial, we saw how to set the Divi menu at the top of the screen after the page scroll. In this article, we will see how to obtain a fixed menu at the bottom of the page.

On the agenda of this article:

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

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - The prerequisites

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

Then, go to the page to be modified, the one where you want to set the menu at the bottom of the page 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 - Create a fixed menu at the bottom of the page

Section menu fixe en pied de page
Add a section to get a docker menu at the bottom of the page.
  1. Add a Full Screen section to your layout. You can insert it anywhere because it will not affect its final position. Within this section, insert a "Full Screen Menu" module. You can choose the menu of your choice: it must have been created beforehand in the Appearance tab > Menu.
  2. Open the settings of the Full Screen section by clicking on the wheel icon.
  3. Add a CSS ID to the "Advanced" tab. Enter: "admenu".
  4. In this Full Screen section, add a Code module.
  5. Go to the "Content" tab
  6. Enter the CSS code below between the tags

For more information on when using the Divi Code module, read this article.

3 - Optimize the mobile version

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

However, it is possible that the mobile version is not optimal. Make sure you tick the right options so that the menu is also available in a mobile version.

Menu fixe en pied de page en version mobile
Optimize the Fixed Menu at the bottom of the page 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".

Thus your fixed menu will drop 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 a site an original style, 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 who reveals himself on the 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 you 2 other tutorials to make the docker menu at the bottom of the page:

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

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

517 words


You should like it too:

Effet zoom sur image avec texte cliquable

Zoom effect on image with clickable text

This article explains how to get a simple zoom effect when hovering over images with text and a clickable link. No need for an extension, Divi makes it easy!

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 de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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

Share This