Do you want to create a navigation bar in Divi that sticks from the bottom to the top of the page?
In this Divi tutorial today we’ll show you step by step how to create a sticky bottom-up navigation bar in Divi.
This will allow the navbar to initially remain at the bottom of the page for a unique above-the-fold layout. Then, once you scroll above the fold of the page, the navbar will remain at the top of the page and stay there throughout the page.
You could say that the page will "take over" the menu at the bottom of the screen and provide your main menu and your website's web .
Let’s get wing:
From the WordPress dashboard, go to Pages > Add New to create a new page.
Divi rows converted to tabs
Give it a title that makes sense to you, then click on taiwan phone number lookup Use Divi Builder
#Image title
Then click Start Building ( from scratch )
Divi rows converted to tabs
After that, you’ll have a blank canvas to start designing in Divi.
Creating a Sticky Bottom-Up Navigation Bar in Divi
Part 1: Create sections and headers above the baseline
For the first part of this tutorial, we will create the section and header above the fold which will serve as the main header section of our page. The section will be displayed full screen on desktop to ensure that the section takes up the entire display window.
See also: Divi: Choose between grid and full-width layouts for the Filterable Portfolio module
Add a row
First, add a row to the columns in the default section.
Divi bottom-up sticky navbar
Column settings
Before adding the module, open the section settings and add the background as follows:
Background color: #e9f9ff
Background image: [add image]
Divi bottom-up sticky navbar
Under the tab About Design , update the Minimum Height and Padding.
Min-height: 100vh (desktop), auto (tablet and phone)
Padding: 20vh (top and bottom)
Divi bottom-up sticky navbar
Title Text
To create the title text, add a new Text module to the row.
Divi bottom-up sticky navbar
Web hosting hebergement web
Then update the content to have the following H1 header:
<h1>Above the Fold</h1>
Divi bottom-up sticky navbar
Text settings
Under the tab About Design in the Text module settings, update the Title font style as follows:
title:
Font: Ruby
Font Weight: Semi-bold
Style:TT
Text alignment: Center
Text color: #302ea7
Size: 130px (desktop), 70px (tablet), 40px (mobile)
Letter spacing: 2px
Line height: 1,3 em