'Left side navigation bar centered and close to page content

I got a side navigation bar that is located on the left side of the page. I would like the position of this to be just left of the content. Example of what I want is in the pictures below:

Current state: Now

What I would like is the menu to be like this:

Dream situation

How can I do this? Code is here: https://codepen.io/johsflesj/pen/QWQERRj

<nav>
  <div class="container">
    <ul>
      <li class="home active"><a href="#home">Home</a></li>
      <li class="about"><a href="#about">About</a></li>
      <li class="contact"><a href="#contact">Contact</a></li>
      <li class="footer"><a href="#footer">Footer</a></li>
      <li class="yoyo"><a href="#yoyo">Yoyo</a></li>
    </ul>
  </div>
</nav>
  <div class="kropp">
  <section id="home">
    <h1>Home</h1>
    <p>Dette er testskrift som er veldig lang som jeg tester om hvor langt ut til siden den går for det er veldig greit å se hvor langt ut til siden innholdet her faktisk kommer</p>
    <p>Dette er testskrift som er veldig lang</p>
    <p>Dette er testskrift som er veldig lang</p>
  </section>
  <section id="about">
    <h1>About</h1>
    <p>Dette er testskrift som er veldig lang</p>
    <p>Dette er testskrift som er veldig lang</p>
    <p>Dette er testskrift som er veldig lang</p>
    <p>Dette er testskrift som er veldig lang</p>
  </section>
  <section id="contact">
    <h1>Contact</h1>
  </section>
  <section id="footer">
    <h1>Footer</h1>
  </section>
  <section id="yoyo">
    <h1>Yoyo</h1>
  </section>
</div>
htmlcsswebmenusidebar


Solution 1:[1]

You can add margin-left:30% to the "container" div, so that it will move closer to "kropp" div, and you have to add media queries if you need this page to be responsive.

Solution 2:[2]

Without any margin settings

<div class="box">
  <div class="nav_out">
    <nav>
     <div class="container">
       <ul>
        <li class="home active"><a href="#home">Home</a></li>
        <li class="about"><a href="#about">About</a></li>
        <li class="contact"><a href="#contact">Contact</a></li>
        <li class="footer"><a href="#footer">Footer</a></li>
        <li class="yoyo"><a href="#yoyo">Yoyo</a></li>
        </ul>
       </div>
     </nav>
    </div>
    <div class="kropp">
      <section id="home">
        <h1>Home</h1>
        <p>Dette er testskrift som er veldig lang som jeg tester om hvor langt ut til siden den går for det er veldig greit å se hvor langt ut til siden innholdet her faktisk kommer</p>
        <p>Dette er testskrift som er veldig lang</p>
        <p>Dette er testskrift som er veldig lang</p>
      </section>
      <section id="about">
        <h1>About</h1>
        <p>Dette er testskrift som er veldig lang</p>
        <p>Dette er testskrift som er veldig lang</p>
        <p>Dette er testskrift som er veldig lang</p>
        <p>Dette er testskrift som er veldig lang</p>
       </section>
       <section id="contact">
         <h1>Contact</h1>
       </section>
       <section id="footer">
         <h1>Footer</h1>
       </section>
       <section id="yoyo">
         <h1>Yoyo</h1>
       </section>
    </div>
  </div>
    
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
    html {
      font-family: "Roboto Mono";
      font-size: 16px;
      scroll-behavior: smooth;
    }       
    .kropp {
      max-width: 0px;
      margin: auto;
      padding-left: 40px;
      height: 100vh;
      max-width: 80%;
    }    
    #home {
     background-color: white;
    }
    #about {
     background-color: light-grey;
    }
    #footer {
     background-color: white;
    }
    #yoyo {
     background-color: white;
    }
    .box {
     display: flex;
     justify-content: center;
     max-width: 80%;
     margin: 0 auto;
    }
    .box .nav_out {
      max-width: 20%;
      float: left;
    }
    nav {
      position: sticky;
      top: 0;
      background-color: white;
      width: 0px;
    }
    nav .container {
      height: 100%;
      width: 160px; 
      position: fixed;
      z-index: 1;
      top: 0;
      overflow-x: hidden;
      padding-top: 20px;
      margin-left:0%
    }
    nav .container ul li {
      display: inline-block;
    }
    nav .container ul li a {
      display: inline-block;
      text-decoration: none;
      padding: 10px 20px;
      color: black;
    }
    nav .container ul li.active {
      background-color: #E9E9E9;
      transition: 0.3s ease background-color;
    }
    nav .container ul li.active a {
      color: rgb(255, 255, 255); 
    }    
</style>

Solution 3:[3]

I used flexbox to get the menu to be located at the right position, regardless of browser size.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Parzival
Solution 2
Solution 3 Johs

Related Questions