TransWikia.com

I want to create fixed sidebar but scroll does not work

Stack Overflow Asked by nav on December 11, 2020

I am using grid layout and the scroll does not work on sidebar if I set the position to fixed it changes the layout and does not work properly when screens shrinks. But if I do not set the position fixed then the sidebar is not fixed. I tried to change the margin padding and different position to fix it but no luck
how can I solve this problem.
Thanks in Advance

.wrapper{
  display:grid;
  grid-template-areas:
  "nav"
  "main";
  width:100%;
}
.navbar{
  grid-area:nav;
  height:100%;
  box-shadow: 2px 2px 10px white;
  margin:0;
  padding:0;
  top:0;
  overflow-y:auto;
 }
.navbar ul{
  list-style-type:none;
  font-size:1.2em;
  display:flex;
  flex-direction:column; 
  padding:0;
  margin:0;
}
.navbar li{
  display:flex;
}
.nav-link{
  text-decoration:none;
  color:black;
  display:flex;
  flex:1;
  padding:5px 0px 5px 10px;
  font-size:1.2rem;
}
<div class="wrapper">
    <nav class="navbar">
      <header id="head">Learn <span style="color:green">HTML</span</header>
      <hr>
        <ul>
            <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
            <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
           <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
           <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
           <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
           <li><a href="#html_links" class="nav-link">HTML Links</a></li>
           <li><a href="#" class="nav-link">HTML Images</a></li>
        </ul>
    </nav>
    
    <main class="main-doc"></main>
</div>

please look at the code if i set position to fixed it shows unwanted spacing
https://codepen.io/Navbham/pen/OJNOqJv

cssfixedhtml

5 Answers

You didn't fix the position. I hope this may help you.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <style>
        .wrapper{
            display:grid;
            grid-template-areas:
                    "nav"
                    "main";
            width:100%;
        }
        .navbar{
            grid-area:nav;
            height:100%;
            box-shadow: 2px 2px 10px white;
            margin:0;
            padding:0;
            top:0;
            overflow-y:auto;
            background-color: #00d6d6;
            width: 220px;
            position: fixed;
        }
        .navbar ul{
            list-style-type:none;
            font-size:1.3em;
            display:flex;
            flex-direction:column;
            padding:0;
            margin:0;
            align-content: flex-start;
            align-items: flex-start;
            justify-items: flex-start;
            justify-content: flex-start;
        }
        .navbar li{
            display:flex;
        }
        .nav-link{
            text-decoration:none;
            color:black;
            display:flex;
            flex:1;
            padding:5px 0px 5px 10px;
            font-size:1.2rem;
        }
    </style>
</head>
<body>

<div class="wrapper">
    <nav class="navbar">
        <header id="head">Learn <span style="color:green">HTML</span</header>
        <hr>
        <ul>
            <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
            <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
            <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
            <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
            <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
            <li><a href="#html_links" class="nav-link">HTML Links</a></li>
            <li><a href="#" class="nav-link">HTML Images</a></li>
        </ul>
    </nav>

    <main class="main-doc">

    </main>
</div>

</body>
</html>

Answered by Daham Akalanka on December 11, 2020

You have no content inside your , that is why it's not scrolling with the page.

I provided min-height to .main-doc so it started scrolling.

You will not have to provide any min-height if you have sufficient content.

 .wrapper{
        display:grid;
        grid-template-areas:
        "nav"
        "main";
        width:100%;
    }
    .navbar{
    overflow-y: auto;
position: fixed;
z-index: 1;
padding: 20px;
height: auto;
bottom: 0;
top: 0;
box-shadow: 2px 0px 5px 0px #959595;
margin: 0;
grid-area: nav;
     }
.navbar ul{
    list-style-type:none;
    font-size:1.2em;
    display:flex;
    flex-direction:column; 
    padding:0;
    margin:0;
}
.navbar li{
  display:flex;
}
.nav-link{
  text-decoration:none;
  color:black;
  display:flex;
  flex:1;
  padding:5px 0px 5px 10px;
  font-size:1.2rem;
}
.main-doc{
    min-height:1000px;
}
<div class="wrapper">
    <nav class="navbar">
      <header id="head">Learn <span style="color:green">HTML</span></header>
      <hr>
        <ul>
            <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
            <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
           <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
           <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
           <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
                       <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
            <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
           <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
           <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
           <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
                       <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
            <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
           <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
           <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
           <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
                       <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
            <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
           <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
           <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
           <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
           <li><a href="#html
_links" class="nav-link">HTML Links</a></li>
           <li><a href="#" class="nav-link">HTML Images</a></li>
                    <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
            <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
           <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
           <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
           <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
        </ul>
    </nav>
    <main class="main-doc">
</main>
</div>

Answered by Harshit Khandelwal on December 11, 2020

Add position: fixed to navbar and add more elements to see the effect.

.wrapper{
    display:grid;
    grid-template-areas:
    "nav"
    "main";
    width:100%;
}
.navbar{
    grid-area:nav;
    height:100%;
    box-shadow: 2px 2px 10px white;
    margin:0;
    padding:0;
    top:0;
    overflow-y:auto;
    position: fixed; // Added this
 }
.navbar ul{
list-style-type:none;
font-size:1.2em;
display:flex;
flex-direction:column; 
padding:0;
margin:0;
}
.navbar li{
  display:flex;
}
.nav-link{
  text-decoration:none;
  color:black;
  display:flex;
  flex:1;
  padding:5px 0px 5px 10px;
  font-size:1.2rem;
}
<div class="wrapper">
  <nav class="navbar">
    <header id="head">Learn <span style="color:green">HTML</span></header>
    <hr>
    <ul>
      <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
  <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
  <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
  <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
  <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
  <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li>
  <li><a href="#html
      _links" class="nav-link">HTML Links</a></li>
  <li><a href="#" class="nav-link">HTML Images</a></li>

    </ul>
  </nav>
  <main class="main-doc">
  </main>
</div>

Answered by Friday Ameh on December 11, 2020

I think the problem in (height:100%;), replace it with (min-height: 100%;) or set it to value in pixels (height: 100px;).

Answered by AnasSafi on December 11, 2020

.wrapper {
  display: grid;
  grid-template-areas: "nav" "main";
  width: 100%;
}

.navbar {
  width: 50%;
  position: fixed;
  grid-area: nav;
  height: 100%;
  box-shadow: 2px 2px 10px white;
  margin: 0;
  padding: 0;
  top: 0;
}

.navbar ul {
  list-style-type: none;
  font-size: 1.2em;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.navbar li {
  display: flex;
}

.nav-link {
  text-decoration: none;
  color: black;
  display: flex;
  flex: 1;
  padding: 5px 0px 5px 10px;
  font-size: 1.2rem;
}

.main-doc {
  height: 200vh;
}
<div class="wrapper">
  <nav class="navbar">
    <header id="head">Learn <span style="color:green">HTML</span></header>
    <hr>
    <ul>
      <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
      <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
      <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
      <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
      <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
      <li><a href="#html
_links" class="nav-link">HTML Links</a></li>
      <li><a href="#" class="nav-link">HTML Images</a></li>

    </ul>
  </nav>
  <main class="main-doc">
  </main>
</div>

Answered by barhatsor on December 11, 2020

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP