Elementor Headers In Single Columns (or Containers): Building Better Headers with Flex

[@jimroberts1248]

Pro-level thinking and implementation, but simple and straightforward. Great presentation!

[@LytboxStudio]

Thanks! 🙏

[@barbarossa04]

Thank you for the awesome tutorial. Much appreciated: Very well and clearly explained.

[@LytboxStudio]

Thanks!🙏

[@andrewdowniephd]

Great tutorial Jeff. I have a few site templates I am working on for local schools (freebies) that I need to play with and follow these instructions. Thanks for the clear instruction.

[@zahrash4582]

Hi Jeffrey. thank you so much for this helpful tutorial. it was fantastic.

[@karenhanretty3280]

Great tutorial. It makes me want to redo all the headers I've built in the past. Would also like to better understand the Inspect function and how to utilize it for ensuring items are aligned. Thank you

[@piotrsek7587]

Hi Jeffrey, I'm a big fan of your tutorials - thanks for sharing your knowledge. If you will allow me, please explain how you would implement the header section in case the logo is placed centrally and you have two separate left and right navigation menus. Is it possible to pack such a menu into one flexbox using the method presented in this video? Thanks in advance for advice.

[@LytboxStudio]

Thanks! And yes, you can add menu > logo > menu into 1 container all inline. It’s even better now with containers but can still be done with sections. Just set each item to inline width and the container to space in between and they‘lol line up correctly

[@olu4721]

Thanks so much for this Jeff. Such a phenomenal job you’re doing . I came across your channel last week and have been glued to it learning the best of web design. I watched your videos and now understood what it was to have a standard in web designing. Thank you. I’d like to find out, what the standard pixel of images is. The specification of images to use especially for hero banners, that will be well captured on Desktop, Tablets and Mobile? Some lovely images I like to use for my background look lovely on the desktop but are barely captured on the mobile screen. Please is there a way to get the right image size to look great across devices and where I can get them? Thanks.

[@sarefeen]

Hi Jeff thanks a lot for making such great tutorials... a ? when I try to do it inline(auto) for the anv menu and the search and cart they dont work any clue ? if possible let me know.. respect sir.

[@jason-m]

Sadly Flex in Elementor is still in Alpha for us Pro account members. Will be another month then moving to Beta - so I'm done with Elementor - tried out Breakdance the last few weeks and it is leaps and bounds better. A little frustrating on the UI for now but they're working through the niggle list. Still enjoy your videos though 👌 any chance you will be giving Breakdance a try?

[@LytboxStudio]

I feel your pain. I’ve been using Bricks more lately and it’s very noticeable when flex is working properly. I’ll have more Bricks tuts coming up as well. Maybe worth giving that a try too

[@jason-m]

Yeah definitely interested in seeing your view on Bricks

[@nelsonharmony8290]

Hey Jeff thanks for the contents they really help, but I have an issue with the plus addons plugin for elementor , I can't remove the line displaying below my plus addons nav menu, please can you help me out with this ? THANKS ALOT

[@claramarketing7738]

Why don't you just add margin right when setting the logo's width to 'inline'? In that case you don't need to use negative margins, z-index and will still be possible to select the widgets. Looking forward to your view on this! I love the content btw.

[@LytboxStudio]

Good question. There’s a few different ways to achieve the same layout in a single column. If the logo is on the left and all other widgets are to the right, I want to keep the logo full width and not use right or left margins, that way it stays aligned with the sections width. It’s to make sure the design stays clean and consistent.

[@emailjough]

@@LytboxStudio set the logo to inline and use css to give it margin-right:auto This avoids using negative margins, z-index, etc but keeps it neat and clean and responsive

[@nubenegra809]

awesome man! though, i am still on the fence about that negative margin on the logo image and buttons... can you explain it a little the reason behind this. Thanks in advance.

[@ionutsabo]

For the first example, I was wondering why you wouldn't use a position:absolute on the logo? It would eliminate the need for z-index tinkering, wouldn't it?

[@barbarossa04]

Thanks for the hint mate - I tried it and it worked like a charm. EDIT: While the positioning of the logo is much better, when using the 'absolute' position, the other items (navigation, search icon and cart) become unclickable in the mobile view unfortunately ;(

[@LytboxStudio]

Good question. Position absolute can have responsive challenges. I only use position absolute in rare cases that absolutely needs it. It’s what’s worked for me but there are a few different ways to achieve the same results.

[@barbarossa04]

EDIT: While the positioning of the logo is much better, when using the 'absolute' position, the other items (navigation, search icon and cart) become unclickable unfortunately ;(

[@ionutsabo]

@@LytboxStudio in this exact case of the first design option you've presented in the video, I don't see how it could pose responsive challenges.

[@ionutsabo]

@@barbarossa04 that's odd and it seems unlikely. I'll have to check for myself :)) But thanks for the heads-up. @Lytbox, is this a thing that should happen when using position absolute, like barbarossa is saying?

[@draucreativestudio8119]

Thx for tutorial. Is there any way to change hamburger icon?

[@olu4721]

Hey Jeff, one more thing. When I create headers, checking the desktop and tablet view, everything looks okay. (I set the responsive breakpoint to mobile. ) But when I check the mobile display the menu is a mess ‘dropping up” into the screen above (if you understand what I mean) instead of dropping down when you click the menu icon. I discovered this issue on the mobile is addressed when the “Full width” option under the responsive breakpont is activated. BUT while that issue is addressed for the mobile, the navigation menu on the Desktop and Tablet is scattered. What could be responsible for this and how can it be fixed? Thanks.

[@igolovin87]

Спасибо!

[@junaidahmad195]

Sometimes when we use margins paddings to make thing right on desktop but on mobile it becomes messed up How to avoid these things plz make a video

[@LytboxStudio]

I know what you mean and for sure! I have a plan for a video on responsiveness with Elementor coming up shortly

[@justtubing3719]

Why is it saying that i need to purchase it when i already have purchased elementor pro ?