Wes
Wes
  • 3
  • 10 032
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
Переглядів: 6 046

Відео

Complete Guide to Framer's New Forms
Переглядів 5322 місяці тому
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
Переглядів 3,6 тис.3 місяці тому
Every day I see Framer designers making this mistake when building accordions, and there's a REALLY EASY fix www.blocsui.com

КОМЕНТАРІ

  • @immigrantmindset
    @immigrantmindset 19 годин тому

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

    • @sewerlamb
      @sewerlamb 12 годин тому

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

  • @kevinwankr
    @kevinwankr 2 дні тому

    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 12 годин тому

      haha glad I came in clutch for you my friend

  • @oluwaseyiayodele288
    @oluwaseyiayodele288 12 днів тому

    😂😂😂. It’s me lol…

  • @oluwaseyiayodele288
    @oluwaseyiayodele288 12 днів тому

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

  • @burtos
    @burtos 15 днів тому

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

    • @sewerlamb
      @sewerlamb 12 годин тому

      Thanks so much, glad you got something out of it

  • @burtos
    @burtos 15 днів тому

    Omg that's literally me! 😂

  • @kerdonstuart3349
    @kerdonstuart3349 26 днів тому

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

  • @DesignDen673
    @DesignDen673 29 днів тому

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

  • @Shroomade
    @Shroomade Місяць тому

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

    • @sewerlamb
      @sewerlamb 12 годин тому

      I found it on Framer's gallery page!

  • @yotamrosental273
    @yotamrosental273 Місяць тому

    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 Місяць тому

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

  • @eba-rave7509
    @eba-rave7509 Місяць тому

    Thank you so much for the valuable information!

  • @yehiam5190
    @yehiam5190 Місяць тому

    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 Місяць тому

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

  • @AromalSula
    @AromalSula Місяць тому

    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 Місяць тому

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

  • @piemasta93
    @piemasta93 Місяць тому

    What a great video

    • @sewerlamb
      @sewerlamb Місяць тому

      @@piemasta93 ❤️

  • @sageahn2144
    @sageahn2144 Місяць тому

    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 Місяць тому

      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 Місяць тому

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

    • @sewerlamb
      @sewerlamb Місяць тому

      Great idea!

    • @Newven01
      @Newven01 Місяць тому

      ​@@sewerlambyes please

  • @farrasaris5394
    @farrasaris5394 Місяць тому

    Wes, thank you.

  • @DailyIntern
    @DailyIntern Місяць тому

    Can you please build an entire website using Framer

    • @sewerlamb
      @sewerlamb Місяць тому

      Like a walkthrough of building a full site?

    • @bishalsaha1434
      @bishalsaha1434 Місяць тому

      ​​@@sewerlambyes

  • @dmabubakkar9840
    @dmabubakkar9840 Місяць тому

    can you expline code override

    • @sewerlamb
      @sewerlamb Місяць тому

      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 Місяць тому

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

    • @sewerlamb
      @sewerlamb Місяць тому

      I'm not 100% sure without more context

  • @CourtzSGD
    @CourtzSGD Місяць тому

    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 Місяць тому

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

  • @joaovapolinario
    @joaovapolinario 2 місяці тому

    Came from twitter too, subscribe immediately!!!!

  • @Abil.internship
    @Abil.internship 2 місяці тому

    Came from twitter, subscribe immediately

  • @ruddro29
    @ruddro29 2 місяці тому

    love this video....keep rocking 💪

    • @sewerlamb
      @sewerlamb 2 місяці тому

      @@ruddro29 will keep rocking just for u!

  • @jalencrisp
    @jalencrisp 2 місяці тому

    lets goooo - great video

    • @sewerlamb
      @sewerlamb 2 місяці тому

      thank u friend <3

  • @glennbull864
    @glennbull864 2 місяці тому

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

    • @sewerlamb
      @sewerlamb Місяць тому

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

  • @omotayotaiwo4375
    @omotayotaiwo4375 2 місяці тому

    UA-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 2 місяці тому

    yoo homie u next level ty

  • @adamkuzma1207
    @adamkuzma1207 2 місяці тому

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

  • @dianaukhabova
    @dianaukhabova 2 місяці тому

    omg this is literally me

  • @RobertBilling
    @RobertBilling 2 місяці тому

    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 2 місяці тому

      Turn the stack of accordions into a component

  • @mt000mp
    @mt000mp 2 місяці тому

    can it work smoothly on a stack of accordions?

    • @sewerlamb
      @sewerlamb 2 місяці тому

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

    • @mt000mp
      @mt000mp 2 місяці тому

      @@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 2 місяці тому

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

    • @sewerlamb
      @sewerlamb 2 місяці тому

      @@mt000mpnot sure what you mean 😮

    • @sewerlamb
      @sewerlamb 2 місяці тому

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

  • @LanguagedesignLearn
    @LanguagedesignLearn 2 місяці тому

    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 2 місяці тому

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

  • @jalencrisp
    @jalencrisp 2 місяці тому

    i am here

  • @deepvoice196
    @deepvoice196 3 місяці тому

    Great news

  • @jonyeazel
    @jonyeazel 3 місяці тому

    always love when i find a new Framer Channel.

  • @LouisArquivio
    @LouisArquivio 3 місяці тому

    that’s also better for SEO, where if you set it to not visible it won’t appear in the html when the page load

    • @sewerlamb
      @sewerlamb 3 місяці тому

      I wish I knew this before posting - great benefit!

    • @RobertBilling
      @RobertBilling 2 місяці тому

      Yes it does?, it's not like when a javascript setting a div to visible that it loads from the server?

  • @Mage1k
    @Mage1k 3 місяці тому

    amazing video - cant believe you dont even have 50 subscribers yet

    • @sewerlamb
      @sewerlamb 3 місяці тому

      thanks legend - check again ;)

    • @Mage1k
      @Mage1k 3 місяці тому

      @@sewerlamb goat

    • @sewerlamb
      @sewerlamb 3 місяці тому

      @@Mage1k no, just a lamb. But i appreciate the sentiment

  • @GracDonarski
    @GracDonarski 3 місяці тому

    omg, that's literally me, lol, now how do you make the answer close automatically when you click on the next question?

    • @sewerlamb
      @sewerlamb 3 місяці тому

      You can set up multiple variants with only one question open and hook them up to each other

  • @rudeeorama
    @rudeeorama 3 місяці тому

    hohoho, thats impressive work. Keep it up man. Thanks for the suggestion to change the text height instead of use visible.

  • @abhijeet.designs
    @abhijeet.designs 3 місяці тому

    Keep em coming 👏👏