Streaming live at 10am (PST)

Absolute div positioned alongside container


#1

How did Webflow accomplish the left nav menu on the features page staying on screen? It appears the menu has an absolute positioning that stays anchored to the edge of a container (zoom out on your browser and the menu stays near the middle, similar to a container). I can't figure out how to absolutely position an element in relation to a container.

@PixelGeek - are there any videos or public links of this page in construction?

Best,
Christopher

Edit: After inspecting the element, it has position "sticky" - see here:

I'm just now learning about this fifth positioning option for the first time after researching here. I'll have to explore with ways to insert this using custom code, I suppose!


#2

I figured this out after some research and experimenting. I went ahead and made a duplicatable version of what I've put together for anyone to play around with if you like this sort of menu.

Note this tidbit of custom code you must place after your closing head tag:

<style>
.sidebar {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
}
</style>

Here's the cloneable showcased project: https://webflow.com/website/Example-of-Sticky-Left-Menu-for-cloning?s=stky


#3

Nice find @ctraver2! We're still waiting for browser support to make this nifty positioning style available for use within the Webflow Designer without coding: http://caniuse.com/#search=sticky


#4

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.