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