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.
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!
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.
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
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.
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.
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?
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
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.
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.
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 ?
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.
@@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...
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?
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.
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.
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
What’s your favorite header style?
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.
Dude, I've been struggling with this for days, that is until I ran across your video. Thank You!
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!
I am so happy to hear this! Thanks Alex
Thanks!
Hey @jay9259 thank you so much for the Super Thanks! 🙏
I thought I was in for another round of website trauma, you really saved me!!!!!!!!!!!!!!!!!!!!!!!
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.
Someone who understands that a straight line is shortest distance. Thank you.
Haha Thanks!
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
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.
That's awesome thanks!
Easiest to follow tutorial I've seen. Thanks a lot
I'm so glad to hear this! Thanks! 🙏
Yoda! Love the intro and outro. Another great vid! 🔥
Yo Alex thanks man!
negative margin for the win boy !!!!!!! thank you so much you handsome genius ! plus points for dog in your profile photo
Super simple tutorial. Easy to follow.
Super glad to hear! Thanks 🙏
Bro deserve 1M+ Subs
thank you very much for this! I had been looking for this info for ages!
Simple, straight to the point! Great tutorial on creating a transparent header! 👍👍👍
I appreciate that thanks!🙏
Just what I needed! Thank you so much!
Thanks a lot for guidance in easy way.
Thanks for tutorial. You are really good.
Thanks you! 🙏
thanks a lot. well detailed teaching! you give reason for every click.
Glad to hear that! Thanks 🙏
Simple & Easy. Awesome video bro. Thumbs up :)
Thanks mate!🙏
Thank you, you made my day.
Really great job Jeff. Great production too. Audio/Video is pristine.
Thanks Gene 🙏
Hello respected brother ❤️, your Dog 🐕 is so much cute 🥰.
Thanks for the tuto! Very good!
Glad it was helpful! Thanks!
Great Video ... Your explanation is great. By the way, your face is similar to my client face.... My client is astonish seeing your face.....😀
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.
Thanks Yousaf. Can you explain for about the measurements? Do you mean about the design and sizing everything?
@@LytboxStudio Yes, Please
nice!!! this is what I was looking for
So glad to hear thanks!
Perfect description, thanks
You're welcome!
Thank you. Great help!
Thanks and glad to hear! 🙏
Thank you so much sir... U saved my job.. Otherwise my boss will fired me
Haha maybe you should get a new boss lol
You are the best! Thank you so much
You're a hero
Thank you man, really appreciate it!
Thank you!
Thanks mate, cool hat also
thank you!! worked
Hi! Thank you for the video. After updating all the changes.. The menu is not visible on website.
Any help with this?
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?
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
Thank you!
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.
That's true and thanks 💪
I was having this exact problem!!!! thanks
Glad to hear!
Thank you for the video!
I appreciate that! 🙏
Thank you for this great tuto !
How can I have a transparent menu and then fixed with a background when I scroll
thank You 🙏
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.
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 ?
great thanks for sharing
great vid thanks
dude is best
How about making it more dynamic by making it sticky on scroll and add a background color when scrolling?
I have a video on that - th-cam.com/video/1Da_N6JjjoA/w-d-xo.html
This video was to help get started with the transparent menu
@@LytboxStudio Awesome, thanks!
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!
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.
@@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...
does this work with "containers?"
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!
Are you using Elementor Pro or the free version?
Header and footer templates are only in the pro version
Thanks bro
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?
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.
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
It should not have anything to do with the theme. Can you share a link and can take a quick look
guys this isn't working for me with the new version of Elementor...
thanks!
You bet!
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.
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
That's not working anymore with the latest update the menu goes behind the content.
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.
T H X !!
🙏
Thank you!
Thank you!
😃