Scrollable Menu from Bottom to Top in Divi.

by | Mar 29, 2022 | Wordpress, Divi | 0 comments

Scrollable Menu from Bottom to Top in Divi.

Tutorial is all about setting up Scrollable Menu From Bottom to Top. It’s awesome guide on Divi Scroll Effects & Implementation of the same. Not only this but this tutorial will give you clear cut idea about how to place your Navigation menu at the bottom of the page, Then stay fixed at top when scrolling.
Divi has lots of features, which provide users to create extraordinary interactive website with minimal use of code(CSS / Javascript). This tutorial will illustrate how to placing a menu at the bottom of the site. We will accomplish this objective by efficiently combine scroll effect & Sticky feature of Divi. So, To design Scrollable Menu From Bottom to Top, We will go through steps that will help you to do the same using the Divi Theme Builder.
To create Sticky Navigation Bar which will start from bottom & then stick on the Top while scroll you need to first check weather Divi Theme is installed & activated on our WordPress dashboard if not yet then click here to install 
Here to build our website header we will create 2 section.

1st Section will have Full Width Section in it we will insert Full Width Header

2nd Section will have 3 columnar Row which consist of

  1. Logo in 1st Column
  2. Navigation Menu in 2nd column
  3. Social Media Follow in 3rd column

After designing this 2 section will apply Setting to 2nd section to stick our Menu at the Top when user scroll.

Scrollable Menu from Bottom to Top in Divi.

Login to WordPress dashboard & navigate to Divi -> Theme Builder then under Default Website Template click on Add Global Header then when pop up appear click on Build Global Header.

How to Edit or Build new Header
1st Section 
Step 1 :- Insert Full Width Section & then add Full Width Header in it.
Export Json file from Divi library

Step 2 :- Delete the default section to make your Full Width Header appear at the top of the page.

Export Json file from Divi library

Step 3 :- To make your header visible on full screen we will set section height to 75vh from Section Setting -> Design Tab -> Height.

Note :- 100vh will set your section height to 100%, so to make out menu display at bottom we have left 25vh for Navigation Menu.

Export Json file from Divi library
Step 4 :- Navigate to Fullwidth Header Setting -> Design Tab & set Min Height to 75vh
Export Json file from Divi library
2nd Section< Step 1 :- Now insert Section with a Row in it which should have 3 columns, After that open section setting & add Background color to it.
Step 2:- In first column insert Image Module & Design it as shown below. Also set Row Top & Bottom Padding to 5px & Section Top & Bottom padding to 20px that will make your Header get fit on Full Screen.
Export Json file from Divi library
Step 3 :- Click on the Add module(+) button in the 2nd column & insert Menu Module & Design the same as shown below.
Insert Navigation Menu in header
Step 4 :- From Menu setting set line Height to 3em to align vertically the menu vertically.
Export Json file from Divi library
Step 5 :- In 3rd column insert Social Media Follow & align as per your choice. To align it vertically set appropriate Top & Bottom padding as per your choice. With this step we have completed designing part.
Export Json file from Divi library
Finally we have placed our navigation menu at the bottom of the screen, now its time to set Stick at top Scrolling Effect.
To get desired output open section setting and navigate to Advanced Tab -> Scroll Effect in there set Sticky Position to Sticky At Top
Export Json file from Divi library

Note :- This setting will make your menu stick at top of the page while you scroll down & initially visible at the bottom of the page.

For more tutorials related to divi just click on below button.

Related Post

Related Video Tutorials

Elegant Themes Membership:

Click Button Below To Get Divi & Elegant Themes Deals

Start using Divi today ! Sign up for an Elegant Themes membership and get access to the Divi theme, Divi Builder, Bloom, Monarch and lots of other great products.

Get 10% Off On DIVI Membership

Get The Best Divi Expert Services.

Find the best Divi expert services you need to help you successfully meet your project planning goals and deadline.

  • Professionally designed website using DIVI
  • Install Latest Divi Themes & Plugins
  • Divi Child Theme Installation
  • Clone Divi Website
  • Super Fast & Friendly support

0 Comments

Trackbacks/Pingbacks

  1. What is Divi? How to Use Divi Theme Builder? - www.tech-gigs.co.in - […] Custom Scrolling Header from Bottom to Top Effect. […]

Submit a Comment

Your email address will not be published. Required fields are marked *