How to create a Transparent Sticky Header in WordPress with Elementor [Without Plugin]

Learn how to create a transparent sticky header in elementor with transition effects step by step. So if you’re interested continue watching this video

:

00:00 Intro

00:45 Create a header template

01:09 block structure

01:28 add image (logo)

01:39 alignment (center)

01:44 add navigation menu (nav menu)

01:58 justify content(center)

02:17 nav menu alignment(center)

02:35 unlink padding

02:52 publish & add condition(header)

03:25 unlink margin and add padding

03:46 add minimum height

04:07 increase margin (fix problem)

04:31 Z-index [2]

04:53 sticky option

05:39 add custom CSS

08:24 change header condition

Let’s get talk about this :

Go to the WordPress dashboard page then go to templates .now we are gonna create a header

Click Add New and select header then choose your template’s name. I’m gonna choose the header tutorial and then create a template

Now, close this interface. we are designing a transparent sticky header for this fresh page

First, click this plus icon and choose double block structure and also resize a little bit

Now add an image and choose the logo image then set the alignment ‘center’

and also we are gonna add a navigation menu just drag & drop it

here, select this nav container then select layout & justify-content ‘center’.now we are changing our nav menu alignment to ‘center’.Just click this edit button & you will see this option.

Our logo is too much smaller now resize it
now click this container and click the advanced tab & unlink padding and also apply this process to another block

Okay, click publish & you will set the condition to where you want to display this

Click add a condition. I’m gonna test this header so that’s why I’m choosing singular and then selecting a page
Now click save and close

Now go back to our homepage and click refresh
Guy’s see here our header appears on this page but it’s not transparent
No problem goes back to our header page and click this main container and select the advanced tab then unlink the margin and put -90px (bottom)

That means the container moves up 90 px
Now click update and go to the layout tab and set minimum height 90 px then click update.

Go back to our page and click refresh
Guy’s see here header isn’t properly moved up. let’s fix this

Go back to our header page & increase the negative margin value
Now check that and click refresh. see her bow our header is successfully transparent but the logo and menu don’t appear

So go back to the header page, select the advanced tab & see the z-index option

Now put the value =2, and click update and check
Yes, it’s working now e are gonna add a sticky option and put some CSS code snippets to look more professional

Now, go back to the previous page and scroll down, and see the motion effects option Open it and change the sticky option [Top] then click update and check that

Click refresh & scrolling down to see sticky features are working
Now we are going to the last to add custom CSS

Those who haven’t subscribed yet please hit the subscribe button to grow up a little bit [okay].

Now back to our header page, select the main container & go to the advanced tab then open custom CSS

I put this code snippet to the description below
First, I’m copying the first portion of this code & paste it here
Check that [All right]

Now apply effects offset value [100],update & check
Guy’s see here when the visitor came in your homepage first see without transparent then scrolling down and then show Transparent.

Now the end of the video I’ll show you a sticky transition effect
Now, copy the other portion of the code snippet & paste it here then click update to check that

See here code not working because we select image not logo that’s why could not specifying logo.[No problem]

Go to the header page and select this edit icon then select the advanced tab & add CSS classes

Now, type class name ‘logo’ then click update .guys see here we got a problem just go back to our header page and select main then advanced tab and increase negative value -180px.it depends on your block size
Don’t worry about this you can change your way

Now click update and check
Okay,[All right]

In this part, I’ll show how you can change your header condition to where you want to display your header

Go back to templates then click theme builder
You can see our header page. I click and edit the conditions. in the future, you can add more pages to your website and you can easily edit them individually.

And thank you so much and I will see you in the next video.
[Bye-bye].

Music from Uppbeat (free for Creators!):

License code: ZXROKQSKZBEDIBCP

💬 & :
:
Profile:
:
:

source