Would you like to create a navigation bar in Divi that is sticky from the bottom to the top of the page?
In the tutorial Divi Today we're going to show you step by step how to create a sticky bottom-to-top 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 the section above the page fold, the navigation bar 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 bring a nice interaction effect to your main menu and your Website.
Let's start!
Preview
To help you visualize the result we're trying to achieve, let's look at the end result:
Download DIVI now!!!
Let's start by creating a new page with Divi Builder
To get started, you will need to do the following:
From the WordPress dashboard, go to Pages > Add New to create a new page.
Give it a title that makes sense to you and click Use Divi Builder
Then click Start Building (Build From Scratch)
After that, you will have a blank canvas to start designing in Divi.
Create a sticky bottom-to-top navigation bar in Divi
Part 1: Creating the Section and Header Above the Waterline
For the first part of this tutorial, we'll create the section and header above the fold that will serve as the main header section of our page. The section will be full screen on the desktop to ensure that the section takes up the entire display window.
Read also: Divi: Choose between the grid and full-width layout of the Filterable Portfolio module
Add a row
To get started, add a row to a column to the default section.
Section settings
Before adding a module, open the section settings and add a background as follows:
- Background Color: #e9f9ff
- Background Image: [add image]
Under the tab Design, update the minimum height and padding.
- Min Height: 100vh (Desktop), auto (Tablet and Phone)
- Padding: 20vh (Top and Bottom)
Header Text
To create the header text, add a new Text module to the line.
Then update the contents with the following H1 header:
<h1>Above the Fold</h1>
Text settings
Under the tab Design in the Text module settings, update the header font styles as follows:
- Heading:
- Font: Ruby
- Font Weight: Semi Bold
- Style: TT
- Text Alignment: centered
- Text Color: #302ea7
- Size: 130px (Desktop), 70px (Tablet), 40px (Phone)
- Letter Spacing: 2px
- Line Height: 1,3 em
Part 2: Creating the section below the waterline
In order to demonstrate the functionality of the sticky navbar, we need to add a section below the fold so we can have room to scroll.
To create the section, duplicate the section above the crease we just made.
Update the background of the duplicate section.
- Background Color: #f4def1
Then give the section a large minimum height so that we have room to scroll down the page. This is simply a section to be completed in place of the contents real one page.
- Min Height: 200vh
Then update the contents of the Text module by replacing the word “Below” by “Above”.
Part 3: Create the sticky navigation bar
To create the sticky navigation bar from the bottom to the top, our first step is to create a new section with one row to one column.
Added new section and line
First, let's add a new regular section directly below the section above the fold.
Next, let's add a one-column row to the section.
Section background and padding
Open the section settings and update the background color.
- Background Color: #302ea7
Then remove the top and bottom padding so that the navigation bar has less height.
- Padding: 0px (Top and Bottom)
Add visible overflow
To ensure that the drop-down menus will remain visible, update the visibility options as follows:
- Horizontal Overflow: Visible
- Vertical Overflow: Visible
Give the section an absolute position on mobile
The mobile drop-down menu will open by default under the hamburger icon. If we keep the navigation bar at the bottom, it would hide the drop-down menu if the user clicks on it.
For a better user experience, we want the navigation bar to start at the very top of the page on the tablet and phone screen.
For this, give the section an absolute position on tablet and phone.
- Position: relative (Desktop), Absolute (Tablet and Phone)
Add sticky position for desktop and mobile
To add the sticky position to the navigation bar section, update the following:
- Sticky Position: Stick to Top and Bottom (Desktop), Stick to Top (Tablet and Phone)
Update row padding
Once the sticky section is complete, open the row settings inside the section and update the padding as follows:
- Padding: 10px (Top and Bottom)
Create a navigation menu
With the section and line in place, we're ready to create the navigation menu.
Start by adding a Menu module to the one-column row.
Menu content
Update the menu content as follows:
- select the menu from the drop-down list
- add logo image
- remove default background color
Under the tab Design, update the following menu text and icon settings:
- Active Link Color: #fff
- Menu Font: Ruby
- Menu Font Style: TT
- Text Color: #fff
- Menu Text Size: 16px
- Text Alignment: right
- Dropdown Menu Line Color: #e19dff
- Mobile Menu Text Color: #302ea7
- Shopping Cart Icon Color: #fff
- Search Icon Color: #fff
- Hamburger Menu Icon Color: #fff
Using a border to offset the absolute position of the navigation bar on mobile
Since the navigation bar section has an absolute position on mobile, the bar will sit above (and cut off) the top section of the page. To fix this, we need to offset the top section using a top border of the same height as the navigation bar/section.
Inspect the height of the navigation bar section on mobile
To determine the height of the navigation bar on mobile, open a live version of the page in a new browser window. Then you can reduce the browser width below 980px to see the mobile menu.
You can also consult: Divi: How to create a sticky navigation bar
Right-click on the section containing the menu and choose the option inspect element in the browser context menu. You should see a box tools under the section indicating the dimensions (including height) of the section.
For this example, the height of the navbar section is 72 pixels.
Add a top border offset to the section above the fold
Now that we have determined the height of the section, open the settings for the top section (above the fold).
Under the tab Design, add the following top border on tablet and phone:
- Top Border Width: 72 pixels (Tablet and Phone)
- Top Border Color: #302ea7
Since the border is the same height as the section with the absolute position, you won't be able to see the border because it only serves to push the section down so it doesn't get cut.
Final result
Discover the end result!
Download DIVI now!!!
Conclusion
Creating a bottom-to-top sticky navbar can easily be done using Divi's built-in position and sticky options.
The key is to give the section above the fold a height of 100vh, then add the navbar section below that sticks to the bottom and top of the browser. Hope this helps add a more unique and engaging above the fold to your Website.
This sticky navbar works best for a single page design rather than an overall template. That said, you can easily choose to use this as your homepage design and use a global header for the rest of the pages using the Divi theme generator .
We hope this tutorial will inspire you for your next Divi projects. If you have any concerns or suggestions, find us in the comments section to talk about it.
You can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites.
Do not hesitate to also consult our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
