Left side navigation bar centered and close to page content

user_14993329 0
Viewed 51

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>
web sidebar menu css html
3 Answers

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.

user_168670170

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>
user_152587370

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

user_149933290
Related