# Build a Responsive Sticky Navbar with CSS

Creating a Custom Sticky Navbar with CSS

Navigation bars are an essential component of any website, allowing users to navigate effortlessly without getting lost. In this article, we’ll explore how to create a custom sticky navbar that is responsive to all screen sizes using only CSS.

Using HTML and SCSS

To start, we’ll write some simple HTML code for our navbar. We’ll use the BEM (Block, Element, Modifier) convention for writing class names, which will help us maintain consistency and organization in our code.

“`html

“`

Next, we’ll write some SCSS code to style our navbar. We’ll use variables for colors and media queries to make our navbar responsive.

“`scss
.header {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;

&__nav {
display: flex;
justify-content: space-between;
align-items: center;
}

&__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}

&__item {
margin-right: 20px;

&:last-child {
  margin-right: 0;
}

}
}
“`

Hamburger Navbars with CSS

For smaller screens, we’ll create a hamburger menu that will display the nav items by overlaying the background of the whole screen. We’ll add a checkbox to determine when to show and hide the nav items.

“`html