Layout & Design

Framer Sites: CSS Styles

Framer Sites: CSS Styles

Framer Sites: CSS Styles

·

2:19

·

14K views

·

Mar 22, 2022

About this lesson

How to add CSS properties like pointer events, z-index, and user-select.

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00yo i am benjamin and in this video i 0:02would like to show you three new 0:04properties we added to framer sites 0:07the first one is user select 0:10so in cases where you have content that 0:12collapses and expands 0:14you might get accidental text selections 0:16like these 0:19now we can fix this 0:21i can go into the component 0:24and add the 0:26user select property and set that to 0:28none 0:30and 0:31now we no longer get any accidental text 0:34selections 0:37the second one is z index so in cases 0:40like these where you are using position 0:42sticky 0:44and you scroll all the way down to the 0:46bottom 0:48your 0:49sidebar might overlap your top bar 0:53now we can fix this by selecting our top 0:55bar 0:57and adding a z index property and making 0:59sure its value is higher than the 1:01sidebar 1:03and then if we scroll down to the page 1:05again 1:09now 1:10our overlap issues are fixed 1:15the third one is 1:16pointer events 1:17[Music]1:19so here we have a component 1:22that is 1:23fixed to the viewport 1:25so it overlaps 1:26all of our content below 1:28which means currently it is blocking the 1:31events and interactions 1:34and to fix this now i can 1:37[Music]1:38set pointer events to none on the 1:41instance 1:44and then go in here 1:46and enable 1:48pointer events 1:50for the actual top bar itself 1:54and now it works you can see we have 1:56hover states again 1:59and i can also 2:01expand and collapse the navigation which 2:04animates to the viewport 2:07so that was a quick look at three new 2:09properties we added to framer sides 2:11thank you for watching and i hope you 2:12enjoyed the video

TeachesSticky & Fixed

Also coversComponents Hover & Press Sizing

Watch on YouTube ↗

‹ Framer Sites: Overlays

Framer Sites: 3D Effects ›

More in this topic

8 Framer shortcuts you're probably sleeping on

8 Framer shortcuts you're probably sleeping on

Layout & Design3K views · 2 months ago

Framer Update: Stack Sorting and Bento Grids

Framer Update: Stack Sorting and Bento Grids

Framer Update7K views · 2 months ago

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Layout & Design1K views · 3 months ago

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Layout & Design2K views · 3 months ago

Animating Vectors in Framer (Vectors Lesson 5)

Animating Vectors in Framer (Vectors Lesson 5)

Layout & Design4K views · 3 months ago

Customizing Vectors with Variables in Framer (Vectors Lesson 4)

Customizing Vectors with Variables in Framer (Vectors Lesson 4)

Layout & Design3K views · 3 months ago

Replace component instances site-wide in Framer

Replace component instances site-wide in Framer

Layout & Design4K views · 4 months ago

Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)

Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)

Layout & Design3K views · 4 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.