Wes
Wes
  • 3
  • 15 812
How to Create a Sticky Header in Framer
Learn to build a nav bar in Framer that stays at the top of the screen when you scroll down on your website.
Get Blocs 👇
blocsui.com
Chapters:
0:00 - Intro
0:47 - Method 1: Fixed Positioning
01:52 - Bonus tip
02:05 - Final step for method 1
02:30 - Making it a floating nav
02:48 - The problem with method 1
03:28 - Method 2: Sticky Positioning
04:40 - Congrats! Keep experimenting
มุมมอง: 10 059

วีดีโอ

Complete Guide to Framer's New Forms
มุมมอง 7314 หลายเดือนก่อน
Framer's new Forms features are a game-changer and here's everything you need to know to build your own. Grab 5 prebuilt forms 👇 framer.com/projects/new?duplicate=9ayXpmWMLjZPSFrVz4Qf Get Blocs 👇 blocsui.com Chapters: 0:00 - Intro 1:00 - The new forms 2:00 - How to build a form 2:10 - What makes up a form 3:00 - Input settings 5:50 - Extra settings 8:00 - How to add fields 9:45 - How to use the...
The RIGHT Way To Build Accordions in Framer
มุมมอง 5K5 หลายเดือนก่อน
Every day I see Framer designers making this mistake when building accordions, and there's a REALLY EASY fix www.blocsui.com

ความคิดเห็น

  • @deekshasatapathy9009
    @deekshasatapathy9009 10 ชั่วโมงที่ผ่านมา

    How to do this if we want to include the nav bar + hero area in the viewport?

  • @sjs9040
    @sjs9040 3 วันที่ผ่านมา

    hey, currently having a problem with my laptop preview being greyed out, causing the only preview available to be phone. when trying to use this tutorial, I used blocs to a add padding and then this happened

  • @user-wi6oi8mo8s
    @user-wi6oi8mo8s 4 วันที่ผ่านมา

    My brother deserves more subscribers. Way to go

  • @Zipltor
    @Zipltor 12 วันที่ผ่านมา

    thank you so much bro

  • @muhammadalwanrosyadi34
    @muhammadalwanrosyadi34 13 วันที่ผ่านมา

    The problem I encountered when using sticky instead of fixed is that when I switch to the mobile breakpoint, the menu bounces when it opens, and I don't know how to fix this

  • @redbot_ai
    @redbot_ai 14 วันที่ผ่านมา

    Make more videos man, you channel is great!

  • @bakiKaradeniz
    @bakiKaradeniz 28 วันที่ผ่านมา

    What a boring explanation. Lots of repetetion and self praise. disliked

  • @brianautomates
    @brianautomates หลายเดือนก่อน

    Good stuff! I don't see it supporting file uploads or did I miss it?

  • @alexlynpi
    @alexlynpi หลายเดือนก่อน

    Nice marketing

  • @edoardodepiccoli3004
    @edoardodepiccoli3004 หลายเดือนก่อน

    keep it up man, amazing work

  • @msvictoria0110
    @msvictoria0110 หลายเดือนก่อน

    how do you link up different variants?

  • @antmgarcia
    @antmgarcia หลายเดือนก่อน

    You helped me out, you got a new follower! Love the way you teach.

  • @mattgelfand1222
    @mattgelfand1222 หลายเดือนก่อน

    What does setting the distribution to End do?

  • @abdul_aak
    @abdul_aak หลายเดือนก่อน

    hey bro. awesome video, im learning framer on my own and this was really helpful. thank you so much. i do have a question though regarding custom cursors. it'd be of great help if you could enlighten me on it. i created nested components in my nav bar and I want a custom cursor on its elements. but its kind of not allowing me to apply the custom cursor I created. its showing an option of 'create variable'. i did so. but I cant figure out what to do next???

  • @immigrantmindset
    @immigrantmindset หลายเดือนก่อน

    Man youre super cool and a great educator. Please please keep making tutorials like this, 🚀

    • @sewerlamb
      @sewerlamb หลายเดือนก่อน

      Thanks! So grateful for your comment. Been insanely busy with Blocs, but will have some new stuff soon

    • @crsmoore
      @crsmoore หลายเดือนก่อน

      Have the exact same sentiment! ✅ Great work Wes! 🙌

  • @JKevinWeng
    @JKevinWeng หลายเดือนก่อน

    BRO, I have been trying to figure this out for the last 4 days and it has been so frustrating because I couldn't find any forums, videos, and chat was NOT helping. Thank you so much, you are amazing.

    • @sewerlamb
      @sewerlamb หลายเดือนก่อน

      haha glad I came in clutch for you my friend

  • @oluwaseyiayodele288
    @oluwaseyiayodele288 2 หลายเดือนก่อน

    😂😂😂. It’s me lol…

  • @oluwaseyiayodele288
    @oluwaseyiayodele288 2 หลายเดือนก่อน

    You are very good at content/tutorial.. very engaging. Thanks 😊

    • @sewerlamb
      @sewerlamb หลายเดือนก่อน

      Thanks!

  • @burtos
    @burtos 2 หลายเดือนก่อน

    Love the content and the quality of it! It's not only entertaining but also fun to watch

    • @sewerlamb
      @sewerlamb หลายเดือนก่อน

      Thanks so much, glad you got something out of it

  • @burtos
    @burtos 2 หลายเดือนก่อน

    Omg that's literally me! 😂

  • @kerdonstuart3349
    @kerdonstuart3349 2 หลายเดือนก่อน

    OMG that's literally me, lol xD Thank you for the tutorial!

  • @DesignDen673
    @DesignDen673 2 หลายเดือนก่อน

    Cool! Could you pls create a video on how to use CMS? and create layouts using CMS.

  • @Shroomade
    @Shroomade 2 หลายเดือนก่อน

    Love it ❤ where is the “CTA to floating nav” example site from?

    • @sewerlamb
      @sewerlamb หลายเดือนก่อน

      I found it on Framer's gallery page!

  • @yotamrosental273
    @yotamrosental273 2 หลายเดือนก่อน

    Thank you for the lovely tutorial! one question tho, my sticky nav bar is stick but for some reason it goes under my hero page while the rest of the site it works perfectly...

    • @sewerlamb
      @sewerlamb 2 หลายเดือนก่อน

      Thanks! Check ur Z index. Make sure the z index of the nav bar is higher than everything else

  • @eba-rave7509
    @eba-rave7509 2 หลายเดือนก่อน

    Thank you so much for the valuable information!

  • @yehiam5190
    @yehiam5190 2 หลายเดือนก่อน

    Hello Wes, I hope you are doing well. Currently, Im learning building websites by framer. If I build an e-commerce website for customers, how could the customer add changes like adding products?

    • @sewerlamb
      @sewerlamb 2 หลายเดือนก่อน

      @@yehiam5190 Framer doesn't support ecommerce natively yet, check out framercommerce :)

  • @AromalSula
    @AromalSula 2 หลายเดือนก่อน

    so when i make my nav sticky it gets pushed down how do i make it sticky but keep it on the y axis about 512 px. any solution

    • @sewerlamb
      @sewerlamb 2 หลายเดือนก่อน

      Put 512 in the "top" field under "sticky"

  • @piemasta93
    @piemasta93 2 หลายเดือนก่อน

    What a great video

    • @sewerlamb
      @sewerlamb 2 หลายเดือนก่อน

      @@piemasta93 ❤️

  • @sageahn2144
    @sageahn2144 3 หลายเดือนก่อน

    Hi i did the fixed position method and it worked but on some sections the bar is there but behind the content. how do i fix this?

    • @sewerlamb
      @sewerlamb 3 หลายเดือนก่อน

      Select the navbar, then go to the properties panel. Then go style -> z index and make sure it's above the z index of your other sections. I usually make it 8 to play it safe

  • @unsa101
    @unsa101 3 หลายเดือนก่อน

    I really like to sell Framer templates, can you guide me how to make winning template and publish to sell please

    • @sewerlamb
      @sewerlamb 3 หลายเดือนก่อน

      Great idea!

    • @Newven01
      @Newven01 2 หลายเดือนก่อน

      ​@@sewerlambyes please

  • @farrasaris5394
    @farrasaris5394 3 หลายเดือนก่อน

    Wes, thank you.

    • @sewerlamb
      @sewerlamb 3 หลายเดือนก่อน

      no thank you <3

  • @unchart_d
    @unchart_d 3 หลายเดือนก่อน

    Can you please build an entire website using Framer

    • @sewerlamb
      @sewerlamb 3 หลายเดือนก่อน

      Like a walkthrough of building a full site?

    • @bishalsaha1434
      @bishalsaha1434 3 หลายเดือนก่อน

      ​​@@sewerlambyes

  • @dmabubakkar9840
    @dmabubakkar9840 3 หลายเดือนก่อน

    can you expline code override

    • @sewerlamb
      @sewerlamb 3 หลายเดือนก่อน

      I'm not the best person to talk about this, but noven_tsx is a great person to follow on twitter. They post heaps of great resources about code overrides/components in Framer!

  • @joshuareagan01
    @joshuareagan01 3 หลายเดือนก่อน

    I created one with sticky if I remove the colour it default change white, while in sticky. any solution ?

    • @sewerlamb
      @sewerlamb 3 หลายเดือนก่อน

      I'm not 100% sure without more context

  • @CourtzSGD
    @CourtzSGD 3 หลายเดือนก่อน

    Thanks. Please try not to use keyboard shortcuts because we can’t see what they are and so it’s hard to follow along. Gotta google the way to do the action without the shortcut and then come back to your video. Thanks!

    • @sewerlamb
      @sewerlamb 3 หลายเดือนก่อน

      @@CourtzSGD Great point! I'll keep it in mind for my next one. Thanks bud

  • @joaovapolinario
    @joaovapolinario 3 หลายเดือนก่อน

    Came from twitter too, subscribe immediately!!!!

  • @Abil.internship
    @Abil.internship 3 หลายเดือนก่อน

    Came from twitter, subscribe immediately

  • @ruddro29
    @ruddro29 3 หลายเดือนก่อน

    love this video....keep rocking 💪

    • @sewerlamb
      @sewerlamb 3 หลายเดือนก่อน

      @@ruddro29 will keep rocking just for u!

  • @jalencrisp
    @jalencrisp 3 หลายเดือนก่อน

    lets goooo - great video

    • @sewerlamb
      @sewerlamb 3 หลายเดือนก่อน

      thank u friend <3

  • @glennbull864
    @glennbull864 3 หลายเดือนก่อน

    Any ideas on how to customise the window that appears on the dropdown?

    • @sewerlamb
      @sewerlamb 3 หลายเดือนก่อน

      you can't customise that at the moment. It just uses your browsers/devices default dropdown

  • @omotayotaiwo4375
    @omotayotaiwo4375 3 หลายเดือนก่อน

    TH-cam recommended this video just in time, built a Framer website and the FAQ keeps driving me crazy. Thank you for this tip.

  • @nicolaslomanto8831
    @nicolaslomanto8831 3 หลายเดือนก่อน

    yoo homie u next level ty

    • @sewerlamb
      @sewerlamb 3 หลายเดือนก่อน

      no, tY!

  • @adamkuzma1207
    @adamkuzma1207 3 หลายเดือนก่อน

    This is exacly what I was looking for! The lack of transition between visible and hidden bothered me so much.

  • @dianaukhabova
    @dianaukhabova 4 หลายเดือนก่อน

    omg this is literally me

  • @RobertBilling
    @RobertBilling 4 หลายเดือนก่อน

    Have you tried putting this on a webpage and multiple accordions beneath each other?, to me, it overlaps the content below when closing.

    • @sewerlamb
      @sewerlamb 4 หลายเดือนก่อน

      Turn the stack of accordions into a component

  • @mt000mp
    @mt000mp 4 หลายเดือนก่อน

    can it work smoothly on a stack of accordions?

    • @sewerlamb
      @sewerlamb 4 หลายเดือนก่อน

      Yeah! Turn the stack into a component and then it'll animate smoothly

    • @mt000mp
      @mt000mp 4 หลายเดือนก่อน

      @@sewerlamb after looking at your blocs site, yeah it does, looks neat. but the footer abrupt jumps is weird and annoying to look at.

    • @mt000mp
      @mt000mp 4 หลายเดือนก่อน

      @@sewerlamb btw, framer forms just drops, I'd be interested to invest in your blocs Design system if you'd implement those.

    • @sewerlamb
      @sewerlamb 4 หลายเดือนก่อน

      @@mt000mpnot sure what you mean 😮

    • @sewerlamb
      @sewerlamb 4 หลายเดือนก่อน

      @@mt000mpWe've got an update coming out in a few days with the new forms as well as some full page templates ❤

  • @LanguagedesignLearn
    @LanguagedesignLearn 4 หลายเดือนก่อน

    Wes, U r professional, i would like to ask about something, HOw can i deliver a website for a client, i mean the dashboard for the client, how can the client add and change from the CMS,

    • @sewerlamb
      @sewerlamb 4 หลายเดือนก่อน

      You can either give them a remix link or you can invite them to the project :)

  • @jalencrisp
    @jalencrisp 4 หลายเดือนก่อน

    i am here

  • @deepvoice196
    @deepvoice196 4 หลายเดือนก่อน

    Great news

  • @jonyeazel
    @jonyeazel 4 หลายเดือนก่อน

    always love when i find a new Framer Channel.