Creating Custom Mobile Nav in Webflow

Поделиться
HTML-код
  • Опубликовано: 28 сен 2024

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

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

    Hi Paul, I've followed all your instructions in the video to the letter and it worked great!
    After hand copying the code snippet you showed on the screen I couldn't stop the scrolling on a phone so I found some alternative code that seemed to do the trick.
    Here's what worked for me, all you need to do is change "mobile-link" in the code for the class used on the mobile button, also just add the open and close tags.
    Webflow.push(function() {
    $('.mobile-link').click(function(e) {
    e.preventDefault();
    $('body').css('overflow', 'hidden');
    });
    $('.mobile-link').click(function(e) {
    e.preventDefault();
    $('body').css('overflow', 'auto');
    });
    });
    Thanks again, your video was extremely helpful!

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

    Wonderful bit! Loved the end section with custom code. Brilliant!

  • @jeansvanjeansington1794
    @jeansvanjeansington1794 2 года назад +5

    Pro tip: You don't need to set up the second click animation by hand. Just copy the first click animation, rename it, swap the initial states with the final state animation and you're ready to go. This way you're done with it much faster and you avoid potential failures because of wrong typo :)

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

    Hi Paul! Did you realize that in Safari browsers, both in mobile and desktop, when menu is opened the body scroll still works??? Any fix code to avoid it? Thanks!

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

    How do you edit a mobile nav bar link? I have a link in the nav bar that only shows up in mobile view. Appreciate any Help!

  • @BrianTerryBranding
    @BrianTerryBranding 3 года назад +6

    Great video, it's exactly what I was looking for.
    Can you post the code you mentioned and if possible also the share link, this would be a massive help in pulling it all together. Many thanks!

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

      I know I'm crazy late on this response, but if you visit the link in the description I've included instructions on how to grab the code I am using.

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

    i feel like you skipped a lot of steps here, im lost at the hamburger menu part, idk how you put it together

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

    I wonder if there's a way to do this with symbols.

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

    my hero, thanks man!

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

    You're a savior man! ❤️