Sticky/Fixed Menu or Navigation Bar in Elementor – SOLVED

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

Pav:

This website uses cookies.