title: How to have a sticky navbar in reactjs
body: <p>My navbar is hiding the contents below the navbar. Also, it's sticked to  the left side instead of the middle part. I hope someone could show me the right way to make the navbar right way to make a sticky navbar that stays in its place even when we are scrolling. </p>
  
  <p>code sanbox <a href="https://codesandbox.io/s/clever-voice-24udr" rel="noreferrer">https://codesandbox.io/s/clever-voice-24udr</a></p>
  
  <p>Navbar.js</p>
  
  <pre><code>import React, { Fragment } from "react";
  import { Link } from "react-router-dom";
  import { Button } from "react-bootstrap";
  
  const NavbarPage = () =&gt; {
    const guestLinks = (
      &lt;ul&gt;
        &lt;li&gt;
          &lt;Link to="/"&gt;
            &lt;Button className="btn btn-primary createNew"&gt;Create New&lt;/Button&gt;
          &lt;/Link&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;Link to="/about"&gt;
            &lt;Button className="btn btn-danger signOut"&gt;Sign out&lt;/Button&gt;
          &lt;/Link&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    );
    return (
      &lt;nav className="navbar bg-white"&gt;
        &lt;h3 className="titleName"&gt;
          &lt;Link to="/"&gt;
            &lt;i className="fas fa-pen" /&gt; demo
          &lt;/Link&gt;
        &lt;/h3&gt;
        {guestLinks}
      &lt;/nav&gt;
    );
  };
  
  export default NavbarPage;
  </code></pre>
  
  <pre><code>.navbar {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 2rem;
    overflow: hidden;
    z-index: 1;
    width: 88.15%;
    margin: auto;
    top: 0;
    border-bottom: solid 1px var(--primary-color);
    opacity: 0.9;
    top: 0;
    box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8),
      -12px 0 8px -4px rgba(31, 73, 125, 0.8);
    box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white,
      12px 0 15px -4px rgba(31, 73, 125, 0.8),
      -12px 0 15px -4px rgba(31, 73, 125, 0.8);
  }
  
  </code></pre>