Fixed navigation bar css-CodePudding

fixed nav bar

I'm having a problem with the scroll bar not pushed to the right most. I set the margin of the nav class to 0 and overflow: auto. Below is codepen link

CodePudding user response：

if your tying to hide the scrollbar use:

ul {
 scrollbar-width: none;
}

or try it with ::-webkit-scrollbar

CodePudding user response：

There is a difference between width of the parent div (.nav) and the list.

Try to set the width of .nav ul to 300px.

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 300px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

I hope this is what you wanted to achieve. If not, please share more details.

CodePudding user response：

Tweaked the css of sidebar to match your need..

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
.container {
    margin-top: -20px;
    display: flex;
    flex-direction: row;
}
@media (max-width: 600px) {
    .container {
    margin-top: -20px;
    display: flex;
    flex-direction: column;
}
}
div.nav  {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: auto;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  white-space: nowrap;
}
.content {
    
}
.nav h1 {
    text-align: center;
}

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: auto;
  background-color: #f1f1f1;
/*   position: fixed; */
  height: 100%;
  overflow-y: scroll;
  
  /* OPTIONAL: add below 2 lines of code to Hide scroll bars in IE, Edge, mozilla*/
  -ms-overflow-style: none; 
  scrollbar-width: none;
}

/* OPTIONAL: add below 3 lines of code to Hide scroll bars in google chrome and apple safari*/
.nav ul::-webkit-scrollbar {
  display: none;
}

 a {
    padding: 8px 16px;
    display: block;
    text-decoration: none;
    color: black;
}
.content {
    margin-left: 30%;
    margin-right: 10%;
}
li {
    list-style-type: disc;
}
.code {
    padding: 0;
    width: 100%;
    background: powderblue;
    padding: 5px 15px 15px;
    margin-left: 10px;
    line-height: 1em;
}

<body>
    <div >
    <div >
    <h1>JS Documentation</h1>
    <hr>
    <ul>
    <a href="#introduction">Introduction</a>
    <hr>
    <a href="#know">What you should already know</a>
    <hr>
    <a href="#javascript">JavaScript and JavaScript</a>
    <hr>
    <a href="#hello">Hello world</a>
    <hr>
    <a href="#vari">Variables</a>
    <hr>
    <a href="#declare">Declaring variables</a>
    <hr>
    <a href="#scope">Variable scope</a>
    <hr>
    <a href="#global">Global variables</a>
    <hr>
    <a href="#constant">Constant</a>
    <hr>
    <a href="#type">Data types</a>
    <hr>
    <a href="#if">if...else statement</a>
    <hr>
    <a href="#while">while statement</a>
    <hr>
    <a href="#function">Function declarations</a>
    <hr>
    <a href="#reference">Reference</a>
    <hr>

</ul>
</div>
    </body>