Thu Jan 07 2021
A sticky Navbar in React with 3 lines of code
Making a sticky navbar is no longer tedious thanks to the new Sticky CSS property! Learn how to do this with only 3 lines of code!
Quick disclaimer, I am going to make this article as short as possible since the code needed to make a Navbar sticky is only 3 lines.
Imagine that you have the below navbar component
1import React from "react";2import styles from "../navbar/navbar.module.css";3const Navbar = () => {4 return (5 <header className={styles.mobileNav}>6 <nav>7 <ul>8 <li>9 <a href="#">Home</a>10 </li>11 <li>12 <a href="#">About</a>13 </li>14 <li>15 <a href="#">FAQ</a>16 </li>17 <li>18 <a href="#">Contact</a>19 </li>20 </ul>21 </nav>22 </header>23 );24};25export default Navbar;
The final step I will be doing to make this navbar sticky is to head over to the navbar.module.css and add the below CSS code
1.mobile-nav {2 position: -webkit-sticky; /* Safari */3 position: sticky;4 top: 0;5}
And that is it! Our navbar is now sticky!
On final note, are you worried about browser compatibility? Don't be. because MDN tells me that the sticky property is now supported across all browser except the old version of IE.
If you found what you read helpful, please let me know and follow me on my social media channels for more! If not, you can just sign up to my email newsletter below to be notified of any blog post I publish 😊