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

Поделиться
HTML-код
  • Опубликовано: 12 сен 2024
  • 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

Комментарии • 79

  • @MitchMahoney
    @MitchMahoney 4 года назад +44

    Mobile info starts at 10:45

  • @amine9156
    @amine9156 2 года назад

    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
      @UrielSoto  2 года назад +1

      That's good to hear man!

  • @nautaneminem5877
    @nautaneminem5877 3 года назад +1

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

  • @gerhardjansevanvuuren1227
    @gerhardjansevanvuuren1227 3 года назад +1

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

    • @UrielSoto
      @UrielSoto  3 года назад +1

      You're welcome friend

  • @annbenoot2664
    @annbenoot2664 2 года назад +1

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

  • @bivasdas1093
    @bivasdas1093 Год назад

    I am very thankful to that video

  • @manojmk95
    @manojmk95 3 года назад

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

  • @warishussain7067
    @warishussain7067 3 года назад

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

    • @UrielSoto
      @UrielSoto  3 года назад

      Got you!

    • @denniszenanywhere
      @denniszenanywhere 3 года назад

      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.

  • @rans3
    @rans3 2 года назад +1

    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
    @ferhatboudraf231 2 года назад

    Thqnk you so much that was useful !

  • @michaelfrymus
    @michaelfrymus 3 года назад +2

    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!

  • @katod5056
    @katod5056 3 года назад

    Thank you for this helpful video!

  • @yashrith7036
    @yashrith7036 3 года назад +1

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

  • @consueloayala3170
    @consueloayala3170 3 года назад +1

    Excelente y completa explicacion, te ganaste un like!!

  • @zaitech3991
    @zaitech3991 2 года назад

    Thank you for your help

  • @gillbates9668
    @gillbates9668 3 года назад

    thank you man! your video helped me a loootttt.

  • @markieTee6354
    @markieTee6354 2 года назад

    thank you!!

  • @novideo3150
    @novideo3150 2 года назад

    You're a legend!

  • @pte-partz
    @pte-partz 3 года назад +1

    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
      @UrielSoto  3 года назад

      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
      @pte-partz 3 года назад

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

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

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

  • @gordonbrownlee1215
    @gordonbrownlee1215 3 года назад

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

  • @ytchannelalpha
    @ytchannelalpha 3 года назад

    thanks really helpful

  • @somnathchowdhury7490
    @somnathchowdhury7490 4 года назад +1

    Good Job Bro...

  • @cristianjimenez5027
    @cristianjimenez5027 3 года назад

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

    • @UrielSoto
      @UrielSoto  3 года назад

      No it should change your desktop version.

  • @meeshpierce
    @meeshpierce 3 года назад +2

    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
      @UrielSoto  3 года назад +4

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

  • @CalvinLMockbee
    @CalvinLMockbee 3 года назад

    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.

  • @bencetomhauser679
    @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

  • @webtrabajoscolombia4124
    @webtrabajoscolombia4124 2 года назад

    Muchas gracias

  • @rafficohen6671
    @rafficohen6671 3 года назад

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

  • @vetrisuriya4702
    @vetrisuriya4702 4 года назад

    Nice tutorial 👏👏

  • @MrMenace3210
    @MrMenace3210 3 года назад +1

    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
      @shashindaeshan3531 3 года назад

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

  • @johnodoemenem5021
    @johnodoemenem5021 4 года назад

    Thanks for sharing this Bro

  • @Darmorreando
    @Darmorreando 3 года назад

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

    • @UrielSoto
      @UrielSoto  3 года назад +1

      This video should help ruclips.net/video/tKhnwm0TVB0/видео.html

  • @uriazar6865
    @uriazar6865 4 года назад

    Thx man ❤️❤️❤️

  • @nickpaul5080
    @nickpaul5080 3 года назад

    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
      @UrielSoto  3 года назад +1

      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.

  • @hindiangamer761
    @hindiangamer761 2 года назад

    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

  • @mosiherati
    @mosiherati 10 месяцев назад

    ❤ tanx

  • @christianstribl4144
    @christianstribl4144 3 года назад

    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
      @UrielSoto  3 года назад

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

    • @christianstribl4144
      @christianstribl4144 3 года назад

      @@UrielSoto Awesome done, thank you very much

  • @sudipdey1889
    @sudipdey1889 3 года назад

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

    • @UrielSoto
      @UrielSoto  3 года назад

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

    • @sudipdey1889
      @sudipdey1889 3 года назад

      @@UrielSoto Thanks for confirming.

  • @zaeemjaved6850
    @zaeemjaved6850 3 года назад

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

    • @UrielSoto
      @UrielSoto  3 года назад

      Watch this video video. I go over that somewhere in there. ruclips.net/video/8lFEdJnc8ck/видео.html

    • @zaeemjaved6850
      @zaeemjaved6850 3 года назад

      @@UrielSoto sure, thankyou ❤️

  • @carlosmariobohorquezcortez5662
    @carlosmariobohorquezcortez5662 4 года назад +1

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

    • @UrielSoto
      @UrielSoto  4 года назад

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

    • @pauldavid2499
      @pauldavid2499 3 года назад

      I use astra and it works fine

    • @xBartyIL
      @xBartyIL 3 года назад

      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.

  • @happygoyal4094
    @happygoyal4094 3 года назад

    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

  • @topnetworkersgroup
    @topnetworkersgroup 4 года назад

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

    • @UrielSoto
      @UrielSoto  4 года назад

      Right click and inspect

  • @rohitthogalla208
    @rohitthogalla208 4 года назад

    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
      @UrielSoto  4 года назад +1

      Might be your theme or another plugin interfering.

  • @zaitech3991
    @zaitech3991 2 года назад

    Mobile menu starts at 10:45

  • @SoloVJ
    @SoloVJ 3 года назад

    Menu list option ?

  • @benfurtner5755
    @benfurtner5755 3 года назад

    Guuuuuyyyyysssss

    • @UrielSoto
      @UrielSoto  3 года назад

      Yeah I sort of stopped doing that 🤣

  • @NaveedAhd
    @NaveedAhd Год назад

    imana im gonna count

  • @tomsteger1
    @tomsteger1 Год назад

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