How to add a bar on the right side? like navigation bar

HTML & CSS
,
1

Hello there,

Actually, I’m trying to create a website that has a vertical navigation bar on the left side and a notification bar on the right side. On the middle side, there will be contents. So the left and right sidebars will be fixed but the middle side or the content area will be scrollable.

I have tried something but I couldn’t make the right sidebar. I would really appreciate if anyone could help me with that.
Thank you.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Side Navigation Bar</title>
	<link rel="stylesheet" href="styles.css">
	<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
</head>
<body>

<div class="wrapper">
    <div class="sidebar">
        <h2>Left Nav</h2>
        <ul>
            <li><a href="#"><i class="fas fa-home"></i>Home</a></li>
            <li><a href="#"><i class="fas fa-user"></i>Profile</a></li>
            <li><a href="#"><i class="fas fa-address-card"></i>About</a></li>
            <li><a href="#"><i class="fas fa-project-diagram"></i>portfolio</a></li>
            <li><a href="#"><i class="fas fa-blog"></i>Blogs</a></li>
            <li><a href="#"><i class="fas fa-address-book"></i>Contact</a></li>
            <li><a href="#"><i class="fas fa-map-pin"></i>Map</a></li>
        </ul> 
        <div class="social_media">
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
      </div>
    </div>


    <div class="sidebar2">
      <h2>Right Nav</h2>
      <ul>
          <li><a href="#"><i class="fas fa-home"></i>Home</a></li>
          <li><a href="#"><i class="fas fa-user"></i>Profile</a></li>
          <li><a href="#"><i class="fas fa-address-card"></i>About</a></li>
          <li><a href="#"><i class="fas fa-project-diagram"></i>portfolio</a></li>
          <li><a href="#"><i class="fas fa-blog"></i>Blogs</a></li>
          <li><a href="#"><i class="fas fa-address-book"></i>Contact</a></li>
          <li><a href="#"><i class="fas fa-map-pin"></i>Map</a></li>
      </ul> 
      <div class="social_media">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
    </div>
  </div>



    <div class="main_content">
        <div class="header">Welcome!! Have a nice day.</div>  
        <div class="info">
          <div>Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. </div>
          <div>Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. </div>
          <div>Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different.
            Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different.
            Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. </div>
      </div>
    </div>
</div>

</body>
</html>

CSS----

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
}

body{
   background-color: #f3f5f9;
}

.wrapper{
  display: flex;
  position: relative;
}

.wrapper .sidebar{
  width: 200px;
  height: 100%;
  background: #000000;
  padding: 30px 0px;
  position: fixed;
}


.wrapper h2{
  color: #bdb8d7;
 
}


.wrapper .sidebar ul li{
  padding: 15px;
  border-bottom: 1px solid #bdb8d7;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  border-top: 1px solid rgba(255,255,255,0.05);
}    

.wrapper .sidebar ul li a{
  color: #bdb8d7;
  display: block;
}

.wrapper .sidebar ul li a .fas{
  width: 25px;
}

.wrapper .sidebar ul li:hover{
  background-color: #594f8d;
}
    
.wrapper .sidebar ul li:hover a{
  color: #fff;
}
 
.wrapper .sidebar .social_media{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.wrapper .sidebar .social_media a{
  display: block;
  width: 40px;
  background: #fdfdff;
  height: 40px;
  line-height: 45px;
  text-align: center;
  margin: 0 5px;
  color: #000000;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.wrapper .main_content{
  width: 100%;
  margin-left: 200px;
}

.wrapper .main_content .header{
  padding: 20px;
  background: #fff;
  color: #717171;
  border-bottom: 1px solid #e0e4e8;
}

.wrapper .main_content .info{
  margin: 20px;
  color: #717171;
  line-height: 25px;
}

.wrapper .main_content .info div{
  margin-bottom: 20px;
}
2

This is a very quick example, there are still many improvements that could be made.

The main thing was to postion the second sidebar on the right, after adding to the style rules shared with the first sidebar.

.wrapper .sidebar, .sidebar2{ /* Added right bar to this rule */
  width: 200px;
  height: 100%;
  background: #000000;
  padding: 30px 0px;
  position: fixed;
}
.sidebar2 { /* Added rule for right bar */
  right: 0;
}

Then you need to stop the content clashing with the right bar with a margin.

.wrapper .main_content{ /* Altered main content with margin on both sides, leave width at auto */
  /*width: 100%;*/
  margin: 0 200px;
}

I removed the width to revert it to auto, which is usually what you want, 100% is too wide.
I also took flex of the wrapper as it’s not needed here. The sidebars being fixed are removed from flow, so flex won’t work with them.

The CSS could be cleaned up further, probably with less specificity and repetition.
You will also need to consider how you want the layout to rearrange on smaller screens, but that may be another topic.

2 Likes
3

Thank you very much, man. That helped me a lot.

2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.