Sticky header icons
-
Hi, we are looking to find a way to keep the header icons sticky when scrolling down. That would be the search, my account and cart icons on the right side of the main menu.
Any css to keep them there? Help is much appreciated.
The page I need help with: [log in to see the link]
-
You can set the CSS property – position: sticky;
Be aware that it’s not supported for some older browsers, or it requires a prefix: https://caniuse.com/css-sticky
But the support of it is between 90-95%, so it’s not such a problem anymore.
Another way to consider, is to use the position: fixed, since you need to apply it for elements in your header (on the top of the page). That option is fully supported.
Here’s the explanation of the difference between the two options: https://www.geeksforgeeks.org/what-is-the-difference-between-positionsticky-and-positionfixed-in-css/
- The topic ‘Sticky header icons’ is closed to new replies.