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.

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

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”.

Create Bottom Menu

Once the builder loaded, add a single column row.

And then add menu module

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.

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

Style: Left Aligned

Dropdown Menu Direction: Upwards

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

Logo Max Width: 50%

Row Settings

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

Section Settings

Set Top and Bottom Padding of the section to 0. 

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

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.

Posted By:
Marshall
Marshall is creative head at Elicus and works with the team to bring ideas to life. He is strongly focused on delivering a quality experience to clients and customers.

0 Comments

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.

0 Comments

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.

Divi Flexile Footers – A pack of Ultimate Divi Footers

Divi Flexile Footers – A pack of Ultimate Divi Footers

Footers provide users with a lot of useful information, whether it is the footer menu, short info about the business, or social icons. You can use a Divi footer to emphasize your website’s bottom area for better user interaction and get multiple goals fulfilled, such...

How to add an Ajax Add to Cart button to Shop module in Divi

How to add an Ajax Add to Cart button to Shop module in Divi

By default, when you insert the shop module in the Divi theme, you don't get any add to cart button. The shop module only displays products with pricing, sale tag (if the products are on sale), and a sorting filter, but no "Add to Cart." However, you've probably seen...

Divi Flexile Headers – A pack of Ultimate Divi Headers

Divi Flexile Headers – A pack of Ultimate Divi Headers

Headers are an essential part of a website. From assisting users navigating the site pages to pages to bring leads to a business, headers play a key role. And with the Divi headers available in the Divi Flexile Headers, you’ll be able to enhance this role in doubles....