Fixed Sidebar Property in CSS

This Flexbox is a versatile layout module with which we can create one-dimensional layouts that require flexibility, such as responsive menus. This using flexbox’s ordering, alignment, and sizing properties, we can build navigation bars that adapt their layouts to the viewport size while keeping the HTML outline logical and accessible.

Navigation Example 1

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h2 class="logo">Tutor Joe's</h2>
    <nav>
      <ul class="nav-link">
        <li><a href="#">Home</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Service</a></li>
      </ul>
    </nav>
    <button>Contact us</button>
  </header>
</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');

*{
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 10%;
  background: #414A4F;
}

.logo{
  cursor: pointer;
  color:white;
  font-weight: 400;
}
.nav-link{
  list-style: none;
  display: flex;
}
.nav-link li {
  padding: 0 20px;
}

.nav-link li a{  
  color:white;
  text-decoration: none;
  transform: 0.3s;
}
.nav-link li a:hover{
  color:#0088e9;
}

button{
  padding: 9px 25px;
  background: rgba(0,136,169,1);
  border:none;
  color:#fff;
  border-radius: 50px;
  transform: 0.3s;
}
button:hover{
  background: rgba(0,136,169,0.8);
}

Output

Background Attachment
Live Preview

Navigation Example 2

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h2 class="logo">Tutor Joe's</h2>
    <nav>
      <ul class="nav-link">
        <li><a href="#">Home</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Service</a></li>
      </ul>
    </nav>
    <button>Contact us</button>
  </header>
</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');

*{
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
header{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 15px 10%;
  background: #414A4F;
}

.logo{
  cursor: pointer;
  color:white;
  font-weight: 400;
  margin-right: auto;
}
.nav-link{
  list-style: none;
  display: flex;
}
.nav-link li {
  padding: 0 20px;
}

.nav-link li a{  
  color:white;
  text-decoration: none;
  transform: 0.3s;
}
.nav-link li a:hover{
  color:#0088e9;
}

button{
  padding: 9px 25px;
  background: rgba(0,136,169,1);
  border:none;
  color:#fff;
  border-radius: 50px;
  transform: 0.3s;
}
button:hover{
  background: rgba(0,136,169,0.8);
}

Output

Background Attachment
Live Preview

Navigation Example 3

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h2 class="logo">Tutor Joe's</h2>
    <nav>
      <ul class="nav-link">
        <li><a href="#">Home</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Service</a></li>
      </ul>
    </nav>
    <button>Contact us</button>
  </header>
</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');

*{
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 10%;
  background: #414A4F;
}

.logo{
  cursor: pointer;
  color:white;
  font-weight: 400;
  order: 3;
}
nav{
  order: 1;
}
.nav-link{
  list-style: none;
  display: flex;
}
.nav-link li {
  padding: 0 20px;
}

.nav-link li a{  
  color:white;
  text-decoration: none;
  transform: 0.3s;
}
.nav-link li a:hover{
  color:#0088e9;
}

button{
  padding: 9px 25px;
  background: rgba(0,136,169,1);
  border:none;
  color:#fff;
  border-radius: 50px;
  transform: 0.3s;
  order: 2;
}
button:hover{
  background: rgba(0,136,169,0.8);
}

Output

Background Attachment
Live Preview


CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects

Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions