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 with Divi

af | 13. september 2019 | Divi & Extra Theme, Nyheder

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.

Demo Link

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.

Affiliate advertizing

Web Hosting

Affiliate advertizing