How to Create a Transparent Header & Menu with Elementor

Рет қаралды 53,011

3 жыл бұрын

✨ Join us in the Lytbox Academy Community:
lytboxacademy.com/join-us/
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.com/contact/
/////
✨ Learn High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy.com/design-with...
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy.com/seo-for-wor...
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy.com/maintenance...
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy.com/the-academy/
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy.com/cloudways/
xCloud:
lytboxacademy.com/xcloud/
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy.com/elementor/
Breakdance Builder:
lytboxacademy.com/breakdance/
Bricks Builder:
lytboxacademy.com/bricks/
Crocoblock:
lytboxacademy.com/crocoblock/
SEOPress (the best SEO tool for WordPress!):
lytboxacademy.com/seopress
Perfmatters:
lytboxacademy.com/perfmatters
InstaWP:
lytboxacademy.com/instawp
WP Umbrella:
lytboxacademy.com/wp-umbrella
/////
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementorheaders #elementormenus transparent header elementor

Пікірлер: 95

@LytboxStudio 3 жыл бұрын

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.

@mwpdefense3184 Жыл бұрын

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

@louisapproved 6 ай бұрын

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.

@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

@oswaldomarcano6197 Жыл бұрын

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

@YahyaAyob 3 жыл бұрын

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

@LytboxStudio 3 жыл бұрын

I appreciate that thanks!🙏

@yemariamkebede1131 Жыл бұрын

Just what I needed! Thank you so much!

@alex-pattison 3 жыл бұрын

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

@LytboxStudio 3 жыл бұрын

Yo Alex thanks man!

@genemoore1 2 жыл бұрын

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

@LytboxStudio 2 жыл бұрын

Thanks Gene 🙏

@ahmedqadri4602 10 ай бұрын

Thanks a lot for guidance in easy way.

@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!

@itsFirestalk 3 жыл бұрын

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 3 жыл бұрын

I am so happy to hear this! Thanks Alex

@henryclayholton5504 2 жыл бұрын

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

@LytboxStudio 2 жыл бұрын

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

@funmiamarvi 5 ай бұрын

You are the best! Thank you so much

@navpreetsingh7574 3 жыл бұрын

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

@LytboxStudio 3 жыл бұрын

Thanks mate!🙏

@vicenzodj Жыл бұрын

thank you!! worked

@christine-trends 2 жыл бұрын

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

@LytboxStudio 2 жыл бұрын

Glad to hear that! Thanks 🙏

@iammoni867 11 ай бұрын

Thank you, you made my day.

@thechamp2585 3 жыл бұрын

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

@LytboxStudio 3 жыл бұрын

Haha Thanks!

@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 ?

@wordpresswithayoub 7 ай бұрын

nice!!! this is what I was looking for

@LytboxStudio 7 ай бұрын

So glad to hear thanks!

@MemerDad Жыл бұрын

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

@bleuciel2416 2 жыл бұрын

Thanks for the tuto! Very good!

@LytboxStudio 2 жыл бұрын

Glad it was helpful! Thanks!

@leonidbogas4202 3 жыл бұрын

Thank you. Great help!

@LytboxStudio 3 жыл бұрын

Thanks and glad to hear! 🙏

@Kruxan Жыл бұрын

Thank you!

@anthonywright3248 Жыл бұрын

great vid thanks

@user-ec1ll7kp7k Жыл бұрын

Super simple tutorial. Easy to follow.

@LytboxStudio Жыл бұрын

Super glad to hear! Thanks 🙏

@patitorodri 2 жыл бұрын

great thanks for sharing

@carljohan1234 2 жыл бұрын

Perfect description, thanks

@LytboxStudio 2 жыл бұрын

You're welcome!

@Qurbanmuhammadali4455 10 ай бұрын

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

@luisr4534 3 жыл бұрын

Thank you for the video!

@LytboxStudio 3 жыл бұрын

I appreciate that! 🙏

@rodrigoborjas7727 3 жыл бұрын

Thank you man, really appreciate it!

@LytboxStudio 3 жыл бұрын

Thank you!

@soccer_star_games Жыл бұрын

Thanks for tutorial. You are really good.

@LytboxStudio Жыл бұрын

Thanks you! 🙏

@user-ff2vb1cy3k 8 ай бұрын

You're a hero

@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.....😀

@sarveshgupta8864 2 жыл бұрын

Thanks bro

@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 🙏

@deepansharawat769 2 жыл бұрын

I was having this exact problem!!!! thanks

@LytboxStudio 2 жыл бұрын

Glad to hear!

@mihamagdic6397 11 ай бұрын

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

@jayf9259 9 ай бұрын

Thanks!

@LytboxStudio 9 ай бұрын

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

@SimonKoss 2 жыл бұрын

thanks!

@LytboxStudio 2 жыл бұрын

You bet!

@YOUSAFMOBEEN1 2 жыл бұрын

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 2 жыл бұрын

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

@YOUSAFMOBEEN1 2 жыл бұрын

@@LytboxStudio Yes, Please

@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.

@SYoc66 11 ай бұрын

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 11 ай бұрын

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

@AmbientMusicStudio 2 жыл бұрын

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 2 жыл бұрын

That's true and thanks 💪

@moumita9069 3 жыл бұрын

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

@LytboxStudio 3 жыл бұрын

Haha maybe you should get a new boss lol

@EmilyHicks 8 ай бұрын

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

@EmilyHicks 8 ай бұрын

does this work with "containers?"

@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.

@kayylanan9769 10 ай бұрын

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 10 ай бұрын

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

@Sunrise017 3 жыл бұрын

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

@LytboxStudio 3 жыл бұрын

I have a video on that - kzfaq.info/get/bejne/Z6qRkrFnr9DOn3U.html This video was to help get started with the transparent menu

@Sunrise017 3 жыл бұрын

@@LytboxStudio Awesome, thanks!

@anuschkamilovanovic8225 3 жыл бұрын

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 3 жыл бұрын

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 3 жыл бұрын

@@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...

@benkocsnorbert9298 3 жыл бұрын

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 3 жыл бұрын

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

@zeusweb1992 2 жыл бұрын

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 2 жыл бұрын

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