Sticky/Fixed Menu or Navigation Bar in Elementor – SOLVED
Sticky Menu has become a priority for mostly all the Web Developers & Designer because of its usability & Design. Generally, most of the popular themes of WordPress come with this feature in their default. If its not , then there are number of Plugins which can be easily used to get Sticky Menu simply by inserting CSS ID/Classes (eg. Sticky Menu (or Anything) on Scroll) . Hence, sometimes result doesn’t come as per we assume. Are you using Elementor for your Website’s Page Building & Want to get a Sticky Menu? If yes then you are somehow at right place.
This Article is specially written for freshers who don’t know how to install Sticky Menu in Elementor Page Builder. Let’s Start…
Things we need
STEP 1
First of All, you need to install Elementor Page Builder & Header Footer Elementor Plugins.
Now, we have to create a Custom Header with the help of Header Footer Elementor Plugin.
Go to Dashboard > Appearance > Header Footer Builder
STEP 2
Add new Template, give it a name.
In the section of Header Footer options, make sure you choose ‘Header’ from Options, publish it & then tap on Edit Button.
STEP 3
Create a Header Design for your Website.
You may also add Menu items here.
STEP 4
Select Column
Go to Advance > Element Style
Put CSS ID & CSS Classes to ‘Navbar‘
Publish it.
STEP 5
Now, rather than your default theme header, newly custom build header will become the Main Header.
Next, make it sticky on the Top.
Go to Dashboard > Appearance > Customize > Custom CSS
Add following Code:
#Navbar{
Position: fixed;
Width: 100%;
opacity: 0.96;
}
Section{
padding-top:7.3%;
}
You may adjust the values by your self, according to size.
Sometimes, padding of section becomes a concern, make sure you provide appropriate HTML Tag to every column or section while creating a page with this Page Builder.
If you got any trouble, just hit a comment.
Read about Free Web Hosting
Leave a Comment