How to create Fixed Sidebar menu with Elementor

It is not a Rocket Science Ladies and Gentlemen.

It means you can do it too. It required Little bit of CSS knowledge that all you need .

01

Create Header template

Go to Templates then Theme Builder then  Add new  – Select the template – Choose to Header with proper name.

Elementor Template
Select your template
Select structure as per your requirement. In this demo i will go with  three structure. and add all your necessary widget .
 data-srcset
Select structure

This is layout and style i come up with. 3 columns layout containing  3 widgets i.e Logo on left,heading on Middle and Icon box with bar on right  with proper style.  

Don’t forget to enable Full width option, adjust your column width properly as per your requirement and add z-index. 

 data-srcset
before CSS transform

Now you might be think how do i create text outline with stroke like the demo i saw above. It is easy and can be done with little bit of CSS.

 

/* Give CSS class or id under Heading widget go to Advanced tab by clicking the cog icon- then go to Advanced and add your own CSS class or id for this example i will use CSS classes : “text-fill“. */

 

Add your CSS rule : You will get the tutorials here 

Please simply don’t copy and paste the code,you need to adjust them as per your requirement.( Just for reference)

.text-fill .elementor-heading-title{
color: black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: .4px;
-webkit-text-stroke-color: rgba(0,0,0,0.6);
text-shadow:
-1px -1px 0 rgba(0,0,0,0.09),
1px -1px 0 rgba(0,0,0,0.09),
-1px 1px 0 rgba(0,0,0,0.09),
1px 1px 0 rgba(0,0,0,0.09);

}

02

Rotate Header section to 90 deg

in order to rotate the section we have to utilize CSS transform property to flip vertically it  to 90deg. 

Again – Adjust your header column width for Mobile,tablet and Desktop.

 

/* Give CSS class or id under section go to Advanced tab by clicking the cog icon- then go to Advanced and add your own CSS class or id for this example i will use CSS classes : “fixed_Header“. */

The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling:

Please simply don’t copy and paste the code,you need to adjust them properly as per your requirement.( Just for reference)


.fixed_Header{
-ms-transform: rotate(90deg); /* IE 9 */

-webkit-transform: rotate(90deg); /* Safari 3-8 */

-webkit-transform-origin: top left; /* Safari 3-8 */

-ms-transform-origin: top left; /* IE 9 */

transform: rotate(90deg);

transform-origin:top left;
width:100vh;

position: fixed;
left:2%;/* if you prefer to use CSS cal() function you can do it too*/
top:0;
}


/* For tablet devices*/
@media(max-width:768px){
.fixed_Header{
left:8%;/* if you prefer to use CSS cal() you can do it too*/
top:0;

}
}


/* For mobile devices*/
@media(max-width:760px){
.fixed_Header{
left:15%;

}
}

The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform.

After you rotate the section. Everything in the section will also rotate.

 

If you want to change them to the original state then.This is the CSS you need to rotate back to original state.

Logo

/* Learn how to add CSS classes above*/

.logo .elementor-image img{
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari 3-8 */
transform:rotate(-90deg);
}

 

Heading if you have one

.heading .elementor-heading-title{

}ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari 3-8 */
transform:rotate(-90deg);

}

you don’t need for icon  because there is an option available you can utilize it under icon/style/rotate -90deg

 data-srcset
With CSS transform property

03

Set the display condition

After you have adjust everything . Your next step is to set up display condition. Hit publish and display condition will open. Set up necessary condition and save & close. Everything about creating Sidebar fixed Header is complete.  

 

What we have left to do is to create pop up so when clicking the icon pop up will trigger.

04

Create a pop up

 I don’t need to explain how to create a pop up template because Elementor have already release Tutorials in-depth on how to do it.

 

What you see on Facebook Group demo is properly adjusting transition effects under Motion effects.

 data-srcset
Play Video

05

Trigger pop up

It is easy to trigger a pop up if there is dynamic option you can trigger pop up.

 

The question is how to trigger pop up from icon or image ?

 

Click the icon widget then above the link there is a database icon – then click to open all the dynamic option available and select popup.

Then click the pop up gear icon and you will see pop up setting . Click the Popup then select the popup template you have created and hit update. And you will see your header in live.

Enjoy 🙂 and let me know what do you think on Comment down below or Facebook group. For demo you will find here

 data-srcset

This site is Powered by Elementor : Theme Builder

This site is powered by our Favorite Theme builder Elementor pro and it contains Affiliate links,which means that if you buy, Foxscribbler will earn a small commission.This commission comes at no additional cost to you.

RELATED

Tutorials

This website uses cookies to ensure you get the best experience on our website.