How To Make A Mobile Menu Header On Elementor Pro | Responsive Header

Learn how to create a mobile menu on Elementor Pro. Enjoy :)
🔵 Join Our Facebook Community!
bit.ly/urielsot...
🟢 Tech Support:
urielsoto.com/...
🟢 My Web Agency:
vluxdesigns.com/
MY COURSES:
🟣 Elementor Mobile Responsive Course
bit.ly/element...
🟣 Website Building Factory Course
bit.ly/website...
PRODUCTS I USE FOR MY WEBSITES:
🔴 Get Elementor Pro - My Favorite Page Builder
bit.ly/urielele...
PRIVATE GROUP:
🔵 Join My Patreon & Get Design Downloads
bit.ly/uspatreon
CONTACT ME:
My Website: urielsoto.com/​
Facebook: / urielsotodev
Linkedin: / uriel-soto-976b3117a

[@MitchMahoney]

Mobile info starts at 10:45

[@amine9156]

Thank you so much i was stuck for two hours on a column thing i didn't know how to manage, now after watching you i spot where im stuck and i did it in 5min !!! what a solution finally ! thank you very much God bless you !

[@UrielSoto]

That's good to hear man!

[@annbenoot2664]

Thanks for your very useful video! I just have the problem that when i make change in the lay-out of my mobile version, these are also applied on the desktop version....

[@nautaneminem5877]

Brilliant tutorial - thank you, my mobile menu looked like crap before seeing this.

[@artcontributionsunlimited234]

Great video man! I’m having a problem on my mobile preview, where the header seams to extent onto a white background for like 10 inches. Do you k ow how to fix that?

[@gerhardjansevanvuuren1227]

Thanks Uriel, this video quickly helped me sort out my mobile header!

[@UrielSoto]

You're welcome friend

[@rans3]

Hi Uriel , thank you very much for this video , it’s great ! I have an issue when customizing the mobile menu , when I change the locations of the icons or change the column width or delete the icons … any change will apply on the desktop and the tablet as well . Could you help ? Thanks 🙏

[@ferhatboudraf231]

Thqnk you so much that was useful !

[@manojmk95]

great video with in depth tutorial make more video like this👍

[@michaelfrymus]

I have a problem with the menu text in the mobile version. When you click that hamburger icon, the text is black on a white BG. If there is any text on the page, behind the dropdown menu, that text seems to bleed into the black menu text... For example; My 'ABOUT' text is partially cut off. You can see the A is being cut off on the bottom, right where there is text on the main page. Same for other letters. You can see the text is being but off where the text appears on the website behind - Even though the menu text is black and not transparent. Whats going on? As a result, not only are the letters cut off, but the link is also not clickable!

[@bivasdas1093]

I am very thankful to that video

[@warishussain7067]

Thanks for the vid! I was so stressed by elementor, this way of doing this is really nice! Thanks for the video!

[@UrielSoto]

Got you!

[@denniszenanywhere]

What I've learned with Elementor is that it's more frustrating to use Elementor and Divi theme builders compared to coding from scratch. Right now, my mobile layout is grayed out and I've deactivated all plugins except Elementor plugins but it's still throwing me some errors. Lots of debugging and lots of inconsistencies when doing the mobile part for sure.

[@CalvinLMockbee]

Learn things I did not know. Great Video. Need help. My HEADER image will not stay on mobile phone when I transfer it to mobile.

[@pte-partz]

I followed your instructions and edited each menu in the right view, but every time I changed it on mobile/tablet it would change how it looked on desktop view on not go back to how it was originally?

[@UrielSoto]

You might want to create two sections. One for mobile and the other for desktop. You'll need to hide the desktop on mobile and vice versa. Under the section settings go to advance > responsive

[@pte-partz]

@@UrielSoto Thanks for the response and thanks for the tutorials, I'll give that a bash instead :)

[@novideo3150]

You're a legend!

[@cristianjimenez5027]

Thanks for the video, when you edit table and phone version didn’t change your desktop version ? Thanks

[@UrielSoto]

No it should change your desktop version.

[@zaitech3991]

Thank you for your help

[@katod5056]

Thank you for this helpful video!

[@yashrith7036]

My nav bar is not working it does not show any drop down when I clicked it in mobile or tablet view

[@consueloayala3170]

Excelente y completa explicacion, te ganaste un like!!

[@UrielSoto]

Muchas gracias!

[@gordonbrownlee1215]

Thanks for this excellent tutorial. I was using Responsive menu on an Astra Theme and it just did not work well. Cheers

[@UrielSoto]

Got you

[@rafficohen6671]

I have a problem. On a computer my header looks the way I want but not on the mobile. Can I have 2 different headers like 'header' and 'mobile header' and when someone goes to my website on a mobile they will see 'mobile header'?

[@bencetomhauser679]

Hello Uriel! I am using a multilngual website. In this case, if i want to use a CTA on the right side as you mentioned, should i build another header and swap the CTA button's description to another language? If yes, is it possible to use different header for different language? Thanks, Bence

[@gillbates9668]

thank you man! your video helped me a loootttt.

[@UrielSoto]

Got you :)

[@markieTee6354]

thank you!!

[@ytchannelalpha]

thanks really helpful

[@davidvillena8432]

Thank you so much, Uriel, this was a great tutorial I was having issues with my website but your video covered all we need to know about building a header, take care regards from Peru.

[@meeshpierce]

Hi. This is a great video. Thanks! I'm wondering if you can have an entirely custom Elementor mobile menu for JUST mobile. My desktop and tablet menu is actually two menus separated by my site logo, which means on mobile, I have 2 hamburger menus. :) Any workarounds for this use case?

[@UrielSoto]

Yes you would have to have a section set for just mobile. By hiding the desktop and tablet version on mobile. Under advanced > responsive

[@hindiangamer761]

Hey dude it'd be great if you reply to me and help In the elementor header, I made a responsive header for mobile but after applying changes when I look my website into my mobile it became even worse the header is too long and the font size menu position everything is disturbed And the thing you showed last I do not have a style tab in elementor settings please help me :( edit - it got fixed after some time but now the problem is when the page loads it plays an animation of approx .5 seconds like from disturbing to normal if you know

[@nickpaul5080]

Thanks Uriel, I modified the mobile menu and got it working well, but when i went back to desktop the nav menu was all messed up. Any ideas?

[@UrielSoto]

Yes that can happen sometimes. I would suggest creating a separate section for your desktop and hiding it on mobile. Incase you can't seem to fix the issue.

[@zaeemjaved6850]

What if i want my menu button on mobile to be on extreme right? Like it should come after cart icon.

[@UrielSoto]

Watch this video video. I go over that somewhere in there. kzbin.info/www/bejne/bp2pdpeAo8hrmc0

[@zaeemjaved6850]

@@UrielSoto sure, thankyou ❤️

[@christianstribl4144]

Super helpful but I have 1 issue, my header isn’t going across the whole page. Like your one has the logo to the edge and the black bar goes all the way across but mine isn’t. My black bar has white space on either side. Would you know how I can fix this. Thank you.

[@UrielSoto]

Yeah that's an easy fix, make sure your section is set to full width.

[@christianstribl4144]

@@UrielSoto Awesome done, thank you very much

[@somnathchowdhury7490]

Good Job Bro...

[@UrielSoto]

Thanks bro

[@MrMenace3210]

When I edit the menu, it also changes the menu do a dropdown for desktop and tablet, I cant disconnect the 2. Any help?

[@shashindaeshan3531]

In menu section there's a thing called dropdown break point. Change that to whatever you like

[@sudipdey1889]

Hi, so basically you designed 2 headers right? One for the desktop and another for Tablet and mobile.

[@UrielSoto]

Yeah I used to do that. As you can tell from my new header video.

[@sudipdey1889]

@@UrielSoto Thanks for confirming.

[@webtrabajoscolombia4124]

Muchas gracias

[@happygoyal4094]

Helo sir please help me I created fully header and footer through elemantor header and footer but in both case when we uploaded in #Entire website so header and footer will updated on home only ## When i click other categories its disappear and show older header and footer which is provide by theme 💔😞 Sir plese solve my issue

[@Darmorreando]

Hello! Thank you for your awesome tut :D How could I make the hamburger menu sticky?

[@UrielSoto]

This video should help kzbin.info/www/bejne/qnzLn6qjZbmJeJI

[@vetrisuriya4702]

Nice tutorial 👏👏

[@UrielSoto]

Thank you

[@topnetworkersgroup]

what are you using to 'view the source code' of wordpress?

[@UrielSoto]

Right click and inspect

[@rohitthogalla208]

While I am using on the mobile, the menu bar is opening for only 1 time after clicking on the sub-menu, so I cannot see the menu bar thereafter I have to reload the site then I can see menu bar, what is the problem can you tell me. thanks in advance

[@UrielSoto]

Might be your theme or another plugin interfering.

[@carlosmariobohorquezcortez5662]

To me it doesnt work, what can i do? im using astra... help me bro

[@UrielSoto]

You might want to use a different theme. Try the hello theme.

[@pauldavid2499]

I use astra and it works fine

[@xBartyIL]

same here, doesnt work for me. it changes the whole menu. the desktop and tablet. cant seem to make it work just for mobile and just for desktop. using astra too.

[@johnodoemenem5021]

Thanks for sharing this Bro

[@UrielSoto]

No problem :)

[@mosiherati]

❤ tanx

[@uriazar6865]

Thx man ❤️❤️❤️

[@SoloVJ]

Menu list option ?

[@zaitech3991]

Mobile menu starts at 10:45

[@benfurtner5755]

Guuuuuyyyyysssss

[@UrielSoto]

Yeah I sort of stopped doing that 🤣

[@NaveedAhd]

imana im gonna count

[@tomsteger1]

I'm gonna go ahead and find another video...very distracting and took 10 minutes to get started on the mobile part.