Framer / How to Create Fixed Navigation with Tab Animation (Easy)

Want 3 months of Framer Pro Free? Use my partner link or promo code: www.framer.com?via=dannysapio
(use promo-code "pro-yearly-partner" to get 50% off the pro annual subscription)
Remix link: framer.com/projects/new?dupli...
How to create a fixed header navigation in Framer with animated tabs. This sticky navigation adds a layer of interaction to any website and it's super easy. This uses a feature called scroll variants inside of Framer and doesn't require any code.
Follow on Twitter for more design tips & tutorials: / dannysapio
dannysapio.com

Пікірлер: 66

  • @antonfullerton3524
    @antonfullerton3524 Жыл бұрын

    I’ve not tried this yet but I’ve been stumped on this one for a few days, massive thank you for uploading this.

  • @BeDigitaal
    @BeDigitaal Жыл бұрын

    For sure the best upload of the day for me! please keep them coming, we need this !

  • @KumailChangezi
    @KumailChangezi Жыл бұрын

    Simple, smooth, and effective! Great tutorial ❤️🔥

  • @UpAllNightDaily
    @UpAllNightDaily Жыл бұрын

    Great video! Straight to the point and easy to follow.

  • @nmnshma
    @nmnshma Жыл бұрын

    Thanks Danny! Iwas trying to figure out how to do this for a client project, you saved me a bunch of time!

  • @abhishekgharia8808
    @abhishekgharia8808 Жыл бұрын

    Bring more we love this ❤

  • @anandojha5857
    @anandojha58573 ай бұрын

    It helped a lot Danny. Almost Lifesaver

  • @yuliu8515
    @yuliu85155 ай бұрын

    Very useful and quick tutorial! Thank you very much

  • @creamdonutco
    @creamdonutco8 ай бұрын

    Thanks man video was really helpful. keep them coming, cheers.

  • @FredrikDammen
    @FredrikDammen Жыл бұрын

    Great video! So simple, thanks :)

  • @jwcoo
    @jwcooАй бұрын

    Thank you for making this tutorial

  • @harshvaja8877
    @harshvaja887710 ай бұрын

    This was so great n helpful bro. tnx ✨

  • @fayadibrahim9080
    @fayadibrahim9080 Жыл бұрын

    Great tutorial, thanks

  • @Chidimmaugwuu
    @Chidimmaugwuu8 ай бұрын

    This helped alot, Thank you so much

  • @aimhigh3701
    @aimhigh3701 Жыл бұрын

    Excellent. Thank you.

  • @Sldigitalworld
    @Sldigitalworld8 ай бұрын

    Thank you.. it’s helpful

  • @sarachang-pc5ds
    @sarachang-pc5ds Жыл бұрын

    Very helpful, thank you for sharing!!=

  • @user-ei4zb2dq1e
    @user-ei4zb2dq1e4 ай бұрын

    Thank you, super helpful and easy to follow tutorial! The information I'm missing is how to change the names of the items. ;)

  • @lapraxis8239
    @lapraxis82396 ай бұрын

    The best video ☺️

  • @michaelreddington9145
    @michaelreddington91453 ай бұрын

    Great video and easy to follow... what about if you want to make the nav bar itself a component? How does the scrolling and linking work then?

  • @Tomonomics
    @Tomonomics10 ай бұрын

    Nice tutorial, thanks! Does Framer let you animate between inactive/ active states on adjacent variants?

  • @bastiux
    @bastiux Жыл бұрын

    Thanks for you tutorial, very usefull, but when i create a component of my navbar to have a responsive variant of it, i lost all my links effect, do you have a solution for this ? 🧡

  • @svdovichenko
    @svdovichenko3 ай бұрын

    Hey Danny great video! Is there way to do it when navigation is a component as well not only links? I tried to do it but could not figure out.

  • @flakitomc8806
    @flakitomc88066 ай бұрын

    thanks a lot!!!

  • @Theschoolofideas_
    @Theschoolofideas_4 ай бұрын

    Hey Danny, very helpful video!! I am stuck in one area, my header has too many options and i have used fill option for width. However the hidden content doesn't show when I scroll to different sections. Can you help? What I am looking is something similar to figma's crop content feature

  • @Matte_Luke
    @Matte_Luke3 ай бұрын

    Thank you Danny! I have a question for you: how did you manage this navigation bar on the Phone view? Since I have more than 3 items, I've been trying to make it a scrollable bar on mobile, where the current Nav item is always centered and automatically scroll it horizontally when I scroll to the next page section. Do you know if there is a way to do this? Thank you again!

  • @panveel
    @panveel Жыл бұрын

    Thanks for sharing, I was trying to get this done with a Tab view type of layout but seam not to be working. So say inside a section you have different content based on specific tabs headers

  • @TheKTUTOS
    @TheKTUTOS9 ай бұрын

    hello, Framer is awesome . But the effect in nav is "fixed" instead "stiky", that worked for me.

  • @shamsnahid4046
    @shamsnahid4046 Жыл бұрын

    Great Video! can you tell me how i can make smooth scroll on my framer website?

  • @user-uz6sm6tq7u
    @user-uz6sm6tq7u10 ай бұрын

    How do we change the name of the Component, for example in your video you have mad Nav item to evry navbar component but can we change the name of the component?

  • @josepdevillaret
    @josepdevillaret5 ай бұрын

    Danny i have a question. Im trying to make a header section that whenever you click it shows a variant that goes down. For example if i have a page of Jeeps, when i click models on the header id like it to expand to be able to show an interactive set of cars with customizations. The problem comes when i click it, it just won't expand and won't show properly... If you don't understand i can show you the page i'm creating on framer, cheers boss.

  • @timprotzenko4633
    @timprotzenko46339 ай бұрын

    How did you adjusted the title afterwards

  • @GustavoMoura-ct8fj
    @GustavoMoura-ct8fj3 ай бұрын

    bro, how can I make this cursor effect? It's so smooth

  • @jaciunscripted
    @jaciunscripted6 ай бұрын

    how do you keep it selected when on that section?

  • @TeethGrit
    @TeethGrit Жыл бұрын

    Hey Danny! Great Videos man! If you wanted to build this as a table of contents for a Framer blog - How would you go about it? It would need to populate dynamically based on the headings for each blog article.

  • @dsapio

    @dsapio

    Жыл бұрын

    Message me on Twitter and we can work through it

  • @BugsVsHumans
    @BugsVsHumans Жыл бұрын

    Hi Danny I’m new to Framer and just recently discovered your channel. I signed up for Framer how could I use your 3 months free because I already signed up for 1 month? Can I still use your code on my next month? Or do I let my current subscription expire first? Then after 3 months can I also use the annual 50% discount? Thanks.

  • @majebell
    @majebell Жыл бұрын

    I loved it! Btw, what is the software / tool you use to record the tutorial? I love the effect and how it looks on screen. Thanks in advance!

  • @dsapio

    @dsapio

    Жыл бұрын

    Screen.studio

  • @majebell

    @majebell

    Жыл бұрын

    @@dsapio thanks!

  • @Ruiruigege
    @Ruiruigege6 ай бұрын

    how to do this when working with a component? from the component view I just cannot see the scroll sections defined in the main editor :(

  • @tungha7509
    @tungha75099 ай бұрын

    In my position type, it's greyed out :(, I also arranged all the elements in columns. Any idea why this is so? thanks

  • @kishorimonukumari2979
    @kishorimonukumari2979Ай бұрын

    how do we change the text on navbar, I created that component and now I want to change the name but nothing happens I come up on the component section. what do I do?

  • @KneelBeforeBlue
    @KneelBeforeBlue10 ай бұрын

    How can i move in between the tabs?

  • @DM-DesignsInMyUniverse
    @DM-DesignsInMyUniverse26 күн бұрын

    How to do "Active Page" Active Menu in framer? Can you please help out with this?

  • @priyankaraja3661
    @priyankaraja36616 ай бұрын

    Is there a way to do this and also make the tabs clickable?

  • @bardiabgh
    @bardiabgh11 ай бұрын

    🔥🔥

  • @user-eb9uy6qw2v
    @user-eb9uy6qw2v10 ай бұрын

    I don't see the Section option when creating link variables

  • @kemetic_
    @kemetic_8 күн бұрын

    Please someone help Me change the name of nav components I can’t figure it out 😭😭😭😭

  • @ivanaperica
    @ivanaperica Жыл бұрын

    Thanks for the content and the great video! This is exactly what I wanted on my page... I followed the instructions and repeated the process now 5 times, but its not possible to choose "sticky" even though all layers are overflow visible. Also I realised the navigation stack can not "fill" in width when moving to the desktop section... Idk if this has something to do with it and I can not find my mistake.

  • @dsapio

    @dsapio

    Жыл бұрын

    If your page is set to use “layout” then sticky should be an option. Check out the remix link to see if you missed something along the way. Sometimes copy and re-pasting your component can fix issues of Framer isn’t updating - it can happen from time to time.

  • @ivanaperica

    @ivanaperica

    Жыл бұрын

    @@dsapio Thank you so much! It was the missing "Layout" :)

  • @prakharagarwal5746
    @prakharagarwal57462 ай бұрын

    Can someone help me create a frontend code for this design?

  • @shamsnahid4046
    @shamsnahid4046 Жыл бұрын

    which tool you have used to record your screen?

  • @dsapio

    @dsapio

    Жыл бұрын

    Screen.studio

  • @tanzeelurrehman220
    @tanzeelurrehman220 Жыл бұрын

    Any idea on how to make nested menu for the navigation bar? Been trying to figure it out for months

  • @dsapio

    @dsapio

    Жыл бұрын

    Each item in the nav bar needs to be a component. On hover you can trigger the secondary menu.

  • @tanzeelurrehman220

    @tanzeelurrehman220

    Жыл бұрын

    Thank you!

  • @theintellectual8811
    @theintellectual8811 Жыл бұрын

    i dont see the smooth scroll button

  • @user-hh1jy7zr3y
    @user-hh1jy7zr3y Жыл бұрын

    great! But after setting ,there's a problem:the texts in the below section will be exited in the nav bar. is it possible to solve?

  • @dsapio

    @dsapio

    Жыл бұрын

    Can you explain this further? Not sure I’m understanding the issue

  • @Rowan_H

    @Rowan_H

    8 ай бұрын

    Set Z index to 0 in Styles

  • @nichy7682
    @nichy7682 Жыл бұрын

    how do you change a menu item name, since it's a component, it keeps applying it to all; is it name, default, or placeholder?

  • @maylyn2189

    @maylyn2189

    2 ай бұрын

    you can change the name by creating a variable on the component for text content

  • @kemetic_

    @kemetic_

    8 күн бұрын

    @@maylyn2189please explain in more detail

  • @nesher3262
    @nesher326210 ай бұрын

    Are you from Israel?