How to Create a Responsive Navigation Component in Framer | Framer Desktop, Tablet, Mobile Tutorial

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

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

  • @morganwittmer6376
    @morganwittmer6376 25 дней назад

    This is the easiest to understand, most straightforward tutorial for Framer I've found. SO relieved to see you have more!!

  • @crazybuoy8357
    @crazybuoy8357 6 месяцев назад +3

    THANKSS HELPED A LOT!!! NEW TO FRAMER, and the tutorial on the official framer channel did not help and rather confused me more

  • @sebastianbarberena8025
    @sebastianbarberena8025 6 месяцев назад +1

    Thanks man, easy to follow. Great work flow.

  • @paulbelityo5719
    @paulbelityo5719 7 месяцев назад

    This was awesome man. I love it when I'm able to find specific tutorials like this on the one section I'm having issues with and you covered and explained everything perfectly. Very much appreciated! 🙏🏻

  • @viking.karwur
    @viking.karwur 5 месяцев назад

    Thanks Soren! Very helpful to learn!

  • @charlesajiboye4421
    @charlesajiboye4421 3 месяца назад

    easy and straightforward. Good one

  • @kelly_browning
    @kelly_browning Год назад +1

    Phenomenal tutorial! Thank you for this, Soren.

  • @timkrash9190
    @timkrash9190 5 месяцев назад +1

    Framer sure is pretty hard, even though it seems to be easy. Trying out Webflow and Framer at the same time and Webflow seems to be so much easier.

  • @pipoyhates4163
    @pipoyhates4163 2 месяца назад

    omgg tysm for sharing this! cos ive struggle how to make this nav

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

    Thanks for sharing these tips, super hyped to start learning Framer!

  • @AyaanFarasanims
    @AyaanFarasanims 5 месяцев назад

    Thank you so much! This was really helpful

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

    Very nice and straight to the point. Thank you.

  • @yzniinja
    @yzniinja 4 месяца назад

    super slick thanks!!

  • @AdamSkjervold
    @AdamSkjervold 5 месяцев назад

    Yo this is so fucking helpful bro this has been such as struggle for me ever since starting framer lmao

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

    LIFESAVER!!!!!!!!!! THANK YOU!!!

  • @petermckinnon386
    @petermckinnon386 5 месяцев назад

    great tutorial pal, better than Framers responsive nav.

  • @mrjamesbrand5185
    @mrjamesbrand5185 11 месяцев назад

    Thanks for this 🙏

  • @sakshammahajan2421
    @sakshammahajan2421 5 месяцев назад

    thanks fam. ♥

  • @Hangvogel
    @Hangvogel 2 месяца назад

    Hi Soren, excellent video. Helped me a lot. I have managed everything, however when checking the result I see in the "Phone" section the following: When clicking on the menu icon, the navigation bar shoots away to the top (out of sight). I see only a few menu items. Any idea how I can fix this?

  • @lukeingalls2199
    @lukeingalls2199 11 месяцев назад

    i'm used to your twitter. Was not expecting tutorials too

  • @DP-gm7vd
    @DP-gm7vd Год назад +1

    Great tutorial, easy to follow along and concise commentary. I have one question, how would you make the open variant of the mobile nav fill the whole screen?

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

      I have the exact same question!

  • @arunk2710
    @arunk2710 5 месяцев назад

    You can press Shift + A to set width and height to Fit Content.

  • @RaffiRexer-dp4qt
    @RaffiRexer-dp4qt 4 месяца назад

    Thanks Soren beautiful video! How about on the left side have a logo and a slogan on the right side just next to the logo instead of just the text 'My Framer Site' Should I first stack the logo and the slogan text?

  • @reemukumari373
    @reemukumari373 19 дней назад

    When I stack X icon and name in mobile version then it reflects to desktop and tablet version also, After stack logo name come in center. Don't understand.

  • @user-wd7ju4ve8k
    @user-wd7ju4ve8k 6 месяцев назад

    at 6.oo mins exactly, when adding the stack it completely breaks the other desktop and tablet variations? Make them completely blank? Please help I have no idea why this happens :'/

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

    Hello, sir. I hope you're doing well. Thank you for the helpful content. We need the fundamentals to finish the instruction on the Framer, which we started with the basics. i love your course content

  • @azran1180
    @azran1180 Год назад +1

    how do I make the navigation bar to be sticky and the mobile open variant to work as an overlay. I have seen some framer templates that have done it. Can you tell how to do that?

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

      Under the “Position” section on the right side of the framer UI there’s a drop-down called “Type”. Setting that to Fixed or Sticky should work.

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

    Hey Soren, I have an issue with the second part of the component at 6:40 where when I toggle “No” visibility, the whole box doesn’t seem to collapse to be smaller but only my icon and title travels down to the middle of the variant.

  • @user-uo3vx9po9s
    @user-uo3vx9po9s 10 месяцев назад

    Hey Soren, I am creating a navbar that contains a locale selector but for some reason I can't get it to stack vertically for mobile. Is there a way to fix this?

  • @farisamin_cello
    @farisamin_cello 7 месяцев назад

    How can I copy the same navigation bar to different pages?

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

    Thanks. Subscribed. This was very well done. Easiest to follow framer tutorial. Building my first site on Framer. Is there a simple way to make a typeform “pop up” with a button press?

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

      Let me dig into this, if I can figure out how I'll make a video

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

      @@soren_iverson Thanks. I love the typform/Calendly plug-in, but it would look so much nicer & more valuable if they could pop up in a window overlay. I have a feeling it’s doable with the tools provided, but I figured I’d ask someone more experienced. 🙌🏾

  • @Michael.design
    @Michael.design Год назад

    Hey Soren, great tutorial! I noticed the the transition from closed to open is pretty fast. Ive seen some templates where it transitions a bit more slowly, like an effect. How would I achieve that? Ive tried to adjust the spring on the default navbar component of Framer itself but it doesn't seem to work..

  • @user-bx4tm3ds5z
    @user-bx4tm3ds5z 7 месяцев назад

    Nice video who doesn't work today. Lost a major part of my night trying to make it workable. Ty a lot for useless !

    • @josepdevillaret
      @josepdevillaret 6 месяцев назад +1

      You don't even know how to do it... It works

    • @josepdevillaret
      @josepdevillaret 6 месяцев назад +1

      Also have some respect for people. Bye

    • @Blopez_
      @Blopez_ 22 дня назад

      @@josepdevillaret for some reason I cant find click button so I instead used the download button but now I cant align it for mobile open

    • @PennyTe
      @PennyTe 21 день назад

      @@josepdevillaret ya ive watched at 10 least 10 vids now. disliked each & understand the nav bar in n out now. n noyhing works. ridiculous bruh

    • @josepdevillaret
      @josepdevillaret 21 день назад

      @@PennyTe try having overflow hidden on all layers, also make the frames responsive, so they adjust depending on the width