How to make a fullwidth menu fixed to the bottom of the screen with Divi

How to make a fullwidth menu fixed to the bottom of the screen

Recently i made a new design using the Divi Theme, where i had to have a (to some point) fixed menu navigation with logo on the bottom of the screen. Now i want to share how to do it with you.

First of all – here’s the design i made with the fixed menu navigation, so you get the idea of what i made.

Here we go…

First start with creating or select a page where you want the menu. Then add the fullwidth Menu Navigation module to the bottom of the page. Here i made the module Global as i’m using it on all pages.

Open the Module and select your Main Menu – Go to the Design tap – select Layout and set your Dropdown Menu direction to Up.

In the Advanced Tab go to the Main Css field and insert this:

position:fixed;
bottom:0;
width:100%;

And in the CSS ID: admenu (you can name it your self – we have to use it later on)

That was the first step to getting a fixed to the bottom Menu Navigation and here’s the second part.

The second part…Let’s have a look on the Menu

Here’s some of the css i use:

Menu item padding

css: .menu-padding {padding-top: 30px!important;}

The .menu-padding goes in the css class in each menu-point like this:

For the Logo

The logo is a little different. First create a custom user-defined link with the link to your Home-page. In my case: http://designs.nouwio.com/drinks/

Secondly to the image-part just insert the logo i a post or page and the grab the code from the “Text”-layout like this:

<img src=”http://designs.nouwio.com/drinks/wp-content/uploads/sites/6/2019/08/BAL-Transparent-white.png” width=”200″ height=”70″ alt=”” class=”wp-image-454 alignnone size-full” />

and in the css class insert menulogo

.menulogo {padding-top: 0px!important;float: left;}

And that’s it. You have just created a fixed to the bottom navigation menu with logo on your page.

Now just insert the global menu you created to begin with on the pages you want it.