Divi advanced flip box

Apr 20, 2020 | Divi Resources

How to place Divi menu at the bottom of the page

Divi comes with lots of functionality, which allows users to design a website with multiple possibilities. And placing a menu at the bottom of the site is one of them. So, in this blog post, I’m going to walk you through the steps that can help you to do the same using the Divi Theme Builder.

As a head’s up, applying this method would replace your footer. And this menu would be the default menu throughout the site.

Let’s get this done!

Add Global Header

Go to your Divi Theme Builder, and choose Add Global Header.

Add global header

Then, select the option “Build Global Header” from the drop-down menu.

Build global header

This will deploy the Template Layout Editor where you will immediately be prompted with the three choices for how you want to start building. Select “Build From Scratch”.

Divi template layout editor

Create Bottom Menu

Once the builder loaded, add a single column row.

Insert row option in Divi builder

And then add menu module

Add menu module in Divi

Design Bottom Menu Module

After the insert of the menu module, add logo. You can choose dynamic content or add a custom one. In this case, I’ve used a custom.

Add logo in menu module

Then, in design tab, go to layout settings and do the customization as follows.

Style: Left Aligned

Dropdown Menu Direction: Upwards

Add style & dropdown menu direction in menu module

Then, in the sizing settings, set logo max width and height as follows.

Logo Max Width: 50%

Set logo sizing in menu module

Row Settings

After all the customization of module, go to Row Settings, and set Top & Bottom Padding as “0.”

Row settings in Divi

Section Settings

Set Top and Bottom Padding of the section to 0. 

Section settings in Divi

Then, in the advanced tab, add the following Custom CSS.

Add custom CSS in advanced tab

height: 73px;

position: fixed; 

bottom: 0;

width: 100%;

z-index: 9999;

Save it, and save the template design by clicking the button in the right corner. Then, exit the builder, and perform Save Changes inside the Theme Builder menu. Thus, you’ve successfully created a bottom menu in Divi.

Below I’ve used the Divi’s Courses layout to place my menu at the bottom.

Bottom menu layout in Divi
Posted By:
Shoeb
Hi, I'm Shoeb. I've been fortunate to work with WordPress for over a decade and I'm continuously learning from this journey. Alongside some wonderful people, I help run Elicus in Jaipur. Our aim is to make WordPress tools that are simple and helpful.

2 Comments

  1. Carly

    I may misunderstand, but are you saying that we aren’t done with the whole task until we take the course you list at the bottom? The course on coding, which I have no interest in doing. So your directions tell us how to create a bottom menu, but not how to place it at the bottom? I’m just not clear. I don’t want to create the menu if it doesn’t function without taking the course. Hope that makes sense.

    Reply
  2. Dale Craig

    I added the menu as you explained, thank you for that, but I am having difficulty figuring out how to get the current page color to show on the menu item. I am using the same main menu as /i have at the top and the header menu shows the current page in a different color, yet that same menu at the bottom does not. Help!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

2 Comments

  1. Carly

    I may misunderstand, but are you saying that we aren’t done with the whole task until we take the course you list at the bottom? The course on coding, which I have no interest in doing. So your directions tell us how to create a bottom menu, but not how to place it at the bottom? I’m just not clear. I don’t want to create the menu if it doesn’t function without taking the course. Hope that makes sense.

    Reply
  2. Dale Craig

    I added the menu as you explained, thank you for that, but I am having difficulty figuring out how to get the current page color to show on the menu item. I am using the same main menu as /i have at the top and the header menu shows the current page in a different color, yet that same menu at the bottom does not. Help!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to Create a Video Streaming Website With WordPress and Divi

How to Create a Video Streaming Website With WordPress and Divi

In 2024, over 472M websites are powered by WordPress, and 2.32M use the mighty Divi theme.  They are the ultimate predators of the digital ocean to help you build an online presence, business, or video streaming website.  A video streaming site can be used on...

Top 9 Image Accordion Modules for Divi in 2025

Top 9 Image Accordion Modules for Divi in 2025

Do you think the images on the website are just there for beauty? They are more powerful than you imagine. It is reported that visual content, including images on the website, gets 94% more views than text-only content. On your website, the content is everything, and...

What Are WordPress Microinteractions?

What Are WordPress Microinteractions?

Do you know about WordPress microinteractions?  They are the vital small interactive elements that enhance the user experience. If you are new to WordPress, you must know all about it to build a responsive website. Microinteractions can help you do so.  So,...

Divi WooCommerce Extended