How to Create a Transparent Header & Menu with Elementor

✨ Join us in the Lytbox Academy Community:
lytboxacademy....
My goal is to create a community for Web Designers, Developers, Freelancers, and Elementor enthusiasts to learn the design & business side of creating websites.
Got questions? You can reach me anytime - lytboxacademy....
/////
✨ Learn High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy....
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy....
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy....
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy....
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy....
xCloud:
lytboxacademy....
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy....
Breakdance Builder:
lytboxacademy....
Bricks Builder:
lytboxacademy....
Crocoblock:
lytboxacademy....
SEOPress (the best SEO tool for WordPress!):
lytboxacademy....
Perfmatters:
lytboxacademy....
InstaWP:
lytboxacademy....
WP Umbrella:
lytboxacademy....
/////
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementorheaders #elementormenus transparent header elementor

[@LytboxStudio]

What’s your favorite header style?

[@muhammadosama2956]

Hello Sir, I hope you will be good. Sir one thing that I want to clarify for myself is that; Is the background designed in another platform like Canva or Photoshop.

[@RehmatDeen]

I followed this tutorial, it works, then I thought if I was making a website using normal HTML this isn't how I'd make an overlay header. Calculating an offset which will no doubt change on different screen sizes doesn't add up. It seems clunky. And I'm surprised Elementor doesn't have a setting to make the header overlay like every other theme does. So instead, I added css class to the "selector" aka the entire header: Position: absolute; width: 100%; . And it worked, Because this automatically makes the element float above the following content. And if you want a sticky header, you use position: fixed; instead.

[@mwpdefense3184]

Dude, I've been struggling with this for days, that is until I ran across your video. Thank You!

[@alex-pattison]

Yoda! Love the intro and outro. Another great vid! 🔥

[@LytboxStudio]

Yo Alex thanks man!

[@itsFirestalk]

Jeff, your tutorials have been a god-send. My CEO asked for my team to re-make our company website and we wouldn't have gotten a clean end product if it wasn't for your tutorials!

[@LytboxStudio]

I am so happy to hear this! Thanks Alex

[@rashedislam1172]

Great Video ... Your explanation is great. By the way, your face is similar to my client face.... My client is astonish seeing your face.....😀

[@christine-trends]

thanks a lot. well detailed teaching! you give reason for every click.

[@LytboxStudio]

Glad to hear that! Thanks 🙏

[@AmbientMusicStudio]

Great tutorial. Only one suggestion. Z-index is better described as in-front and behind rather than above and below. Above and below suggests position on the page.

[@LytboxStudio]

That's true and thanks 💪

[@acharwp]

Thanks for tutorial. You are really good.

[@LytboxStudio]

Thanks you! 🙏

[@mihamagdic6397]

Hi! Thank you for the video. After updating all the changes.. The menu is not visible on website. Any help with this?

[@matthewtyndall1918]

This was the solution I was going to use for my company, but I was worried there was a better solution. Glad to see I was heading in the right direction. Thank you

[@EssenpreisEnergie1]

T H X !!

[@LytboxStudio]

🙏

[@EmilyHicks]

guys this isn't working for me with the new version of Elementor...

[@IrinaHoller]

I've been looking for your video for days...and finally found it! I didn't know how to remove that white line under the header, if you have a dark header it is visible (I tried with css but it didn't work), and through your video I got the idea how to do it. Thank you! You are amazing.

[@LytboxStudio]

That's awesome thanks!

[@Qurbanmuhammadali4455]

Hello respected brother ❤️, your Dog 🐕 is so much cute 🥰.

[@SYoc66]

When you move the hero image up and behind the transparent header, do you ever find that its very difficult to edit the hero image down the road as the "Edit Section" for the header overlaps the hero section selection button? Is there a way around that?

[@LytboxStudio]

Yes, it’s a challenge when using negative margins and moving elements behind other elements. What helps me is using the navigator. Once you get used to using both the editor and navigator, clicking and moving elements gets easier and especially when working with negative margins

[@EmilyHicks]

does this work with "containers?"

[@moumita9069]

Thank you so much sir... U saved my job.. Otherwise my boss will fired me

[@LytboxStudio]

Haha maybe you should get a new boss lol

[@YahyaAyob]

Simple, straight to the point! Great tutorial on creating a transparent header! 👍👍👍

[@LytboxStudio]

I appreciate that thanks!🙏

[@zeusweb1992]

If i using this method, when the site loading, first i see white bar (behind the header) for 0,5~ sec. Any solutions for this? Btw In the past, this solution worked well with the same amount of content.

[@LytboxStudio]

This can possibly from a caching plugin. Try deactivating any optimization plugins and see if that fixes it. If it does then you'll need to figure out which CSS file the code is on and whitelist it so it doesn't cache. You can find it in inspect element. What caching plugin are you using? And feel free to reach me on IG and send a link. I can have a quick look. Cheers

[@boosraphael]

Thank you for this great tuto ! How can I have a transparent menu and then fixed with a background when I scroll thank You 🙏

[@benkocsnorbert9298]

is it possible that it doesn't work with the free version of oceanwp? No matter how I do this, it will not be transparent anyway

[@LytboxStudio]

It should not have anything to do with the theme. Can you share a link and can take a quick look

[@avivacglobalventure9487]

Thank you!

[@LytboxStudio]

😃

[@maddiedoesmakeup1093]

I see the white bar when I go to any other breakpoint that isn't desktop, mobile, or tablet. So if I view the website on a different laptop resolution the white bar comes back. how do I make fix this?

[@LytboxStudio]

Are you using px for the negative margin? Or is your logo using a % for the size? If it is use px for the margin and logo size. If there’s a white bar, something is changing in size that is creating more space most likely.

[@jayf9259]

Thanks!

[@LytboxStudio]

Hey @jay9259 thank you so much for the Super Thanks! 🙏

[@louisapproved]

Thank you for this explanation, I was missing the Z-index thing and I couldn't make my transparent header overlay correctly, you finally made it clear for me.

[@kayylanan9769]

I cant find the Header and Footer options it only shows Lansding Page, Section and Page? How do I get to see those? Hope you noteice!

[@LytboxStudio]

Are you using Elementor Pro or the free version? Header and footer templates are only in the pro version

[@funmiamarvi]

You are the best! Thank you so much

[@MemerDad]

negative margin for the win boy !!!!!!! thank you so much you handsome genius ! plus points for dog in your profile photo

[@wajahatmubashir]

Bro deserve 1M+ Subs

[@RodMayberry]

That's not working anymore with the latest update the menu goes behind the content.

[@LytboxStudio]

It still works. Make sure the z-index in your header section/container is higher than the z-index in your banners. It’s all in your z-index.

[@feroshaworn125]

Thanks mate, cool hat also

[@vicenzodj]

thank you!! worked

[@thechamp2585]

Someone who understands that a straight line is shortest distance. Thank you.

[@LytboxStudio]

Haha Thanks!

[@wordpresswithayoub]

nice!!! this is what I was looking for

[@LytboxStudio]

So glad to hear thanks!

[@anthonywright3248]

great vid thanks

[@anuschkamilovanovic8225]

I have a question... Is it also possible to make the Menu sticky at the bottom? By the way...Thanks for all your great videos!

[@LytboxStudio]

Great question. By default you can make the footer stick at the bottom. I think to get the menu to stick at the bottom will take a bit of a work around. I just added to my list for next tutorials.

[@anuschkamilovanovic8225]

@@LytboxStudio ahh thank you so much! It`s for one of my first clients ( I created my creative agency last october ) so I want to make it happen so bad! The idea to use the footer as header comes also in my mind. But then, I need to change something in the backend cause of SEO I think...

[@iammoni867]

Thank you, you made my day.

[@Sunrise017]

How about making it more dynamic by making it sticky on scroll and add a background color when scrolling?

[@LytboxStudio]

I have a video on that - kzbin.info/www/bejne/Z3XEkIFsf8-dpaM This video was to help get started with the transparent menu

[@Sunrise017]

@@LytboxStudio Awesome, thanks!

[@YOUSAFMOBEEN1]

very informative and helpful. if possible, please make videos on measurements like header,footer, sidebar, logo etc. This will be a big help for learners. Thanks.

[@LytboxStudio]

Thanks Yousaf. Can you explain for about the measurements? Do you mean about the design and sizing everything?

[@YOUSAFMOBEEN1]

@@LytboxStudio Yes, Please

[@navpreetsingh7574]

Simple & Easy. Awesome video bro. Thumbs up :)

[@LytboxStudio]

Thanks mate!🙏

[@SeidelAgency]

Super simple tutorial. Easy to follow.

[@LytboxStudio]

Super glad to hear! Thanks 🙏

[@oswaldomarcano6197]

thank you very much for this! I had been looking for this info for ages!

[@NabilAlhamawi]

You're a hero

[@sarveshgupta8864]

Thanks bro

[@Kruxan]

Thank you!

[@hartleyhare251]

Thank you!

[@olu4721]

Awesome tutorial Jeff. Ever so explicit. I’ve been trying to create the header but and it looks awesome on the desktop and tablet. But when I try to adjust the drop down on the phone display, it just scatters everything on the desktop and tab. This is after setting the responsive break point to phone and the content width under the edit section to full width. What am i doing wrong ?

[@rodrigoborjas7727]

Thank you man, really appreciate it!

[@LytboxStudio]

Thank you!

[@henryclayholton5504]

Easiest to follow tutorial I've seen. Thanks a lot

[@LytboxStudio]

I'm so glad to hear this! Thanks! 🙏

[@ahmedqadri4602]

Thanks a lot for guidance in easy way.

[@bleuciel2416]

Thanks for the tuto! Very good!

[@LytboxStudio]

Glad it was helpful! Thanks!

[@leonidbogas4202]

Thank you. Great help!

[@LytboxStudio]

Thanks and glad to hear! 🙏

[@yemariamkebede1131]

Just what I needed! Thank you so much!

[@patitorodri]

great thanks for sharing

[@deepansharawat769]

I was having this exact problem!!!! thanks

[@LytboxStudio]

Glad to hear!

[@genemoore1]

Really great job Jeff. Great production too. Audio/Video is pristine.

[@LytboxStudio]

Thanks Gene 🙏

[@carljohan1234]

Perfect description, thanks

[@LytboxStudio]

You're welcome!

[@SimonKoss]

thanks!

[@LytboxStudio]

You bet!

[@luisr4534]

Thank you for the video!

[@LytboxStudio]

I appreciate that! 🙏