Elementor Transparent Headers with Position Absolute

[@NicholasZein]

The production quality is Lyt! 🔥

[@LytboxStudio]

New full frame 😉

[@Atulwebdesigner]

Great tutorial, Jeff. I use the Astra theme and Elementor. I make the transparent header inside the Astra customizer. But it was great to watch the tutorial using Elementor. Thanks.

[@LytboxStudio]

It’s nice when a good theme gives this option making it easier for us and Astra has always been a great theme 👍

[@zafit02]

Jeffrey is there any solution if the top container is also absolute but not using negative margins? in this video the top container is not absolute, my problem is that im using two transparent container but i only want the second one sticky

[@LytboxStudio]

You'll need to adjust the vertical offset on the bottom container to use both top and bottom set to absolute.

[@mikecharles6767]

Thank you Jeffrey, I always learn from your videos.

[@LytboxStudio]

Thanks Mike! 🙏

[@dgdkothalawala]

Mr Jeffrey, What About the Sticky Top Method?

[@LytboxStudio]

Works perfectly with this. Just select sticky to the top and that's all. I'm using it in this example website.

[@zafit02]

Jeffrey what theme you reccomend using with ELEMENTOR to create a woocomerce shop? I usually use HELLO THEME but im a bit tired of making ALL from scratch

[@LytboxStudio]

Check out Rey Theme. It’s been a while since I used it but the developer is great and he’s been keeping it up to date with regular updates.

[@zafit02]

@@LytboxStudio Thank you very much for responding. Yes, I'm looking for something that adds a bit of style to WooCommerce right from the start, but that I can edit absolutely everything with Elementor. I want a balance between both options. Hopefully one day the Hello theme will be modernized a bit, I don't want big features, just something that doesn't look horrible from the start... for example better animations in the add to cart button, etc

[@P_o.crypto]

Nice video. Its better to use negative margin because you can use .elementor-sticky--effects class if your header is sticky to add some effects (like delete some items or change colors on scroll). If i need some pages with negative margins and some without margin and another background color i add some custom css to first block on page like: .headerblock { background: black !Important; margin-bottom: 0px !Important}.

[@LytboxStudio]

Good points

[@WilliamMcEntee]

Thanks Jeffrey. One problem: this is not working for me. Is that because I am using the free version of Elementor?

[@LytboxStudio]

Might be. The free version is super limiting and I think the header is limited in the free version.

[@mdqmatias]

Absolute works if you need the header to be sticky to the top?

[@LytboxStudio]

Yes it does. Since it's a translarent background, you'll need to add CSS for .elementor-sticky--effects and give it a background color on scroll. It all works with absolute 👍

[@thevideas]

Hi teacher. Can you show me if our title or description is overflow so I just want to show only 1 sentence and other text is show ellipse so how to do in elementor ?

[@LytboxStudio]

That's a great Idea for a video!

[@yuyogameplay]

Is using absolute positions recommended for Google SEO practice? Great video!

[@LytboxStudio]

Doesn’t have positive or negative effect on SEO. Google bots read the html, not css and absolute positioning in the header won’t affect performance,

[@NikhilSharma-t8n]

Hi Sir, can you make a video on sticky header with elementor pro without using code?

[@LytboxStudio]

Sure, it would be a quick one. If you follow the menu I built here, all you need to do is go to the container you want to stick > advanced tab > motion effects > select sticky to the top. If you want to add effects then it will take some css but this is a good start.

[@NikhilSharma-t8n]

@@LytboxStudio Thank You Sir

[@ashleywalls4097]

If you Don't yet have content on the page yet and you set header to absolute and give it a high z-index you can not click the + or folder icon to add content.

[@Moderator.]

I have a white logo and using elementor hello theme. When I use it on mobile menu, the toggle button shows white background behind it. I have tried transparenting the background but it shows white. I am forced to use grey color and it looks ugly.

[@LytboxStudio]

There is an option in the WordPress menu widget to change the background to the toggle button. Try changing that to transparent. Another option is to give a white background to your toggle and make the bars a dark color. It’s more user friendly and can look better.

[@emmanuelivwighre5399]

This is better because a section of your image will not encroach in the header section.

[@LytboxStudio]

That is a good bonus 😉

[@Ubaishkhan.]

please tell me a web browser which can do drag and drop work on mobile except Puffin browser, it is not working

[@LytboxStudio]

Chrome works on my iPad. I wouldn’t try anything on a mobile phone though.

[@thereal_JMT_]

No bricks 😢

[@LytboxStudio]

Coming up next 😉

[@LytboxStudio]

@@CR7-r2f2e not to worry! I'm not abandoning Elementor. But I think it adds value for us all to learn more and Bricks is an amazing tool. It's not going to pull a Cwicly on us 😉 I do want o expand in more areas of web design here because it's an amazing world and we all can keep learning.

[@harbourdogNL]

Hi Jeffrey, good video as always. Given the quality of your content, I'm surprised you don't have more subscribers...people who post brainless inane garbage with no merit or redeeming social value have subs in the hundreds of thousands, and so many good channels like yours don't get the recognition they deserve. YT is just so f*cked...

[@LytboxStudio]

🙏

[@nayanponz7883]

Using the absolute will affect the speed: you can test that.

[@LytboxStudio]

Same load as position relative. If there is a difference then it’s so minute it wouldn’t be noticeable.

[@jeeiee_com]

how to optimize ?

[@LytboxStudio]

What do you want to optimize?