If you are experienced with Elementor, you may already know how to build a header. If not, please see the walkthrough video at the bottom of this article. Step 2: Build both of your menus. In your header template, add both menus and style them up as you like. For your main header, add a 100 in the z-index. This will make sure it is on top of. The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one. Jun 9, 2020 - Learn everything about How to Use Z-Index in Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more. Use Elementor to drag the “Max Mega Menu” widget onto the page: After adding the Max Mega Menu Widget to the page, edit the widget settings and select the menu location you wish to display. Fix Menu Z-Index.

How to create Elementor Vertical Social Icons

Ever wonder how to make a vertical aligned social icons list using Elementor Page Builder? Here’s how to do it with few lines of codes.

In this tutorial, we’re going to accomplish the following:

1. Make the social icons aligned vertical direction (default is horizontal).
2. Make the social icons floating on top of other elements (Hero sliders in this case).
3. Position the social icons elements responsively based on screen size.
4. Able to make it sticky or scroll with page.

The results:

How to accomplish this:

1. Create new social icons element.

Z Index Elementor

2. Switch to Advanced tab and make the element class ID as “vert-social”

3. Go to the Custom CSS section and place to following CSS code.

Z-index Elementor


#vert-social {
position: absolute;
display: flex;
z-index: 999;
top: 15vh;
left: 5vw;
width: 50px;
}
#vert-social.elementor-shape-circle .elementor-icon.elementor-social-icon {
margin-top: 5px;}


Css Default Z Index

You can customize the CSS to your liking such as:

• position: absolute (scroll with page) | fixed (sticky when scrolled)
• you can change “left” to “right” if you want it to float on the right side.
• margin-top: 5px (is for spacing between icons)
• elementor-shape-circle replace the ‘circle’ with ‘square’ or ’rounded’ based on type of social icons used.

Bring Element To Front Css

Update your page and preview it! Good luck!