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
- Logo in 1st Column
- Navigation Menu in 2nd column
- 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.
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.
Step 1 :- Insert Full Width Section & then add Full Width Header in it.
Step 2 :- Delete the default section to make your Full Width Header appear at the top of the page.
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.
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.
To get desired output open section setting and navigate to Advanced Tab -> Scroll Effect in there set Sticky Position to Sticky At Top
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.
0 Comments
Trackbacks/Pingbacks