Streaming live at 10am (PST)

Create Sticky Menu on Scroll


#1

I am trying to get the breadcrumb div block to stay sticky on scroll once it hits the top of the page. Having a hard time trying to figure this out, have looked at other forum tops and they don’t seem to be very clear on how to execute this for my particular instance.

The page that this is on is here: /clear-bra-new

I look forward to getting some help, thank you in advance!


Here is my public share link: https://preview.webflow.com/preview/palmersigns?preview=238b3450866fb07eb1bb668bebbec37e

(how to access public share link)


#2

Hi @clintp,

  1. Place a HTML Embed inside of your ‘breadcrumb’ div

  2. Open the HTML Embed Code Editor and enter the following code:

.breadcrumb {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0px;
}

  1. Save & Close the code editor and you’re done!

Props to @J_Canan who shared the above code in the YouTube comments after the last Webflow Workshop.

Hope that works for you.


#3

The above code should have ‘style’ at the beginning and at the end on their own lines. For some reason when I post the code on here it gets rid of them…


#4

Hey, thanks man! I appreciate it!


#5

No worries dude - thank you for sharing the code!


#6

Ay, my pleasure man!


#7

Awesome!!

Thank you very much for this, Im still discovering that there can be a lot of custom code applied in Webflow. Great stuff to know for the future. Thank you!