title: Making a 4 section CSS fixed navbar, running into layout issues
body: <p>I'm trying to make a fixed navbar at the top of my webpage, it's all pure HTML and CSS for now. The problem comes as a result of the fact that I want a button on the left side to open up a sidebar for navigation on mobile. I want to position the three navbar items in the center of the navbar, evenly spaced from eachother. As previously stated, I also want the navbar to be fixed so that it is visible no matter where the user scrolls on the page. </p>
  
  <p>Here's the HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Cyberpunk Bar&lt;/title&gt;
    &lt;link href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.1/lux/bootstrap.min.css" rel="stylesheet" integrity="sha384-4KIc2mnKfAA7VjirNLk2Sqp7jxFNq1q8+FhYGxhW2l52lt4HJsfksL+hjswHfbl/" crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;div id="navbar"&gt;
  
        &lt;ul id="navbar-menu"&gt;
          &lt;li&gt;
            &lt;span class="open-slide"&gt;
              &lt;a href="#" onclick=""&gt;
                &lt;div&gt;&lt;i id="open-button" class="fab fa-bitcoin"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;/a&gt;
            &lt;/span&gt;
          &lt;/li&gt;
  
          &lt;li&gt;&lt;a href="#section1"&gt;Theme&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#section2"&gt;Beer&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#section3"&gt;Menu&lt;/a&gt;&lt;li&gt;
        &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;body&gt;
    &lt;div class="pimg1"&gt;
    &lt;div class="ptext"&gt;
      &lt;span class="border"&gt;Cyberpunk Bar and Grill&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;section class="section section-light"&gt;
    &lt;h2&gt;Section 1&lt;/h2&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! &lt;br&gt;
     &lt;p&gt;Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?&lt;/p&gt;
  &lt;/section&gt;
  
  &lt;div class="pimg2"&gt;
    &lt;div class="ptext"&gt;
      &lt;span class="border"&gt;Brilliant Beer Selection&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;section class="section section-light"&gt;
    &lt;h2&gt;Section 2&lt;/h2&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! &lt;br&gt;
     &lt;p&gt;Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?&lt;/p&gt;
    &lt;/p&gt;
  &lt;/section&gt;
  
  &lt;div class="pimg3"&gt;
    &lt;div class="ptext"&gt;
      &lt;span class="border"&gt;Burgers and Steak&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;section id="section3" class="section section-dark"&gt;
    &lt;h2&gt;Section 3&lt;/h2&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! &lt;br&gt;
     &lt;p&gt;Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?&lt;/p&gt;
  &lt;/section&gt;
  
  &lt;div class="pimg4"&gt;
    &lt;div class="ptext"&gt;
      &lt;span class="border"&gt;What are you waiting for?&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's the CSS</p>
  
  <pre><code>body, html
  {
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color: #666;
  }
  
  #navbar
  {
    height: 100px;
    background-color: black;
    z-index: 1;
    overflow: hidden;
    margin: 0;
    padding: 10;
    filter:drop-shadow(0 5px 15px black);
  }
  
  #navbar-menu
  {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    list-style: none;
    font-size: 25px;
    margin: 0;
    padding: 0;
    color: white;
  }
  
  #open-button
  {
    color: white;
    font-size: 50px;
    padding-bottom: 25px;
    padding-top: 25px;
  }
  
  #open-button:hover
  {
    color: #666;
  }
  
  .pimg1, .pimg2, .pimg3, .pimg4
  {
    position: relative;
    opacity: 0.70;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  /*   fixed = parallax, scroll = normal */
    background-attachment: fixed;
  }
  
  .pimg1
  {
    background-image:url('https://i.imgur.com/bHJ4vHL.jpg?1');
    min-height: 100%;
  }
  
  .pimg2
  {
    background-image:url('https://images.pexels.com/photos/338711/pexels-photo-338711.jpeg?cs=srgb&amp;dl=alcohol-alcoholic-alcoholic-beverage-338711.jpg&amp;fm=jpg');
    min-height: 400px;
  }
  
  .pimg3
  {
    background-image:url('https://images.pexels.com/photos/156114/pexels-photo-156114.jpeg?cs=srgb&amp;dl=beef-bread-burger-156114.jpg&amp;fm=jpg');
    min-height: 400px;
  }
  
  .pimg4
  {
    background-image:url('https://images.pexels.com/photos/696218/pexels-photo-696218.jpeg?cs=srgb&amp;dl=adult-bar-blur-696218.jpg&amp;fm=jpg');
    min-height: 400px;
  }
  
  .section
  {
    text-align: center;
    padding: 50px 80px;
  }
  
  .section-light
  {
    background-color: #f4f4f4;
    color: #666;
  }
  
  .section-dark
  {
    background-color: #282E34;
    color: #DDD;
  }
  
  .ptext
  {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #000;
    font-size: 32px;
    letter-spacing: 8px;
    text-transform: uppercase;
  }
  
  .ptext .border
  {
    background-color: #111;
    color: white;
    padding: 20px;
  }
  </code></pre>
  
  <p>Is using a  the best practice for this? Please help!</p>