Elementor Sticky Mobile Navigation Bar + Open Nav Upwards

Elementor Sticky Mobile Navigation Bar + Open Nav Upwards

Just launched! Checkout the CSS Course for Elementor users.

Table of Contents

In this tutorial you are going to learn how to create a sticky  at the bottom navigation bar with Elementor.

We will be using the new flex containers for this, as well as the Nav Menu element from Elementor Pro.

First, add a new container to your Elementor page

Set the width to Full Width, and the flex direction to "Row".

Elementor Sticky Mobile Navigation Bar + Open Nav Upwards 1

Under the Advanced tab, set it's Position to "Fixed", change the Vertical Orientation to Bottom, and add a Z-Index of 9999 (or whatever you need).

Elementor Sticky Mobile Navigation Bar + Open Nav Upwards 2

You can also toggle the Responsive visibility for this container for what you need. If you want this only on mobile, then hide it on desktop and tablets.

Then, add your Elementor Nav Menu inside that container

Under the Mobile Dropdown options, enable "Full Width".

Elementor Sticky Mobile Navigation Bar + Open Nav Upwards 3

Under Advanced, give it a width of ~60px. This will allow us to easily add other icons in a row in this navigation bar later.

Elementor Sticky Mobile Navigation Bar + Open Nav Upwards 4

Add this custom CSS to make the Elementor navigation open upwards

Add this CSS under Advanced > Custom CSS.

You will want to keep it as it is, except for the bottom value. Adjust this as needed, it should be about the height of that sticky container.

With the code in place, open your navigation, then play with the value to see what you need.

selector .elementor-nav-menu__container {
transform-origin: 50% 100%;
top: initial!important;
bottom: 40px; /* Adjust this value */
}

Elementor Sticky Mobile Navigation Bar + Open Nav Upwards 5

Now, add other icons / UI element in the sticky mobile navigation bar

You can now add whatever else you want in there! Home icon, social media, lead forms, my account, etc.

Finally, enjoy your new Elementor mobile sticky navigation bar!

I hope you hâve enjoyed this tutorial. Let me know in the comments!

Cheers!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

Leave a Reply

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.