Sticky Nav Bar Issues

Question

I am trying to make a sticky navbar but when i do position: fixed it moves my navigation and merges it to the top left. the logo should be on the left and the navigation on the right

the website is https://nexusdevelopment.netlify.app incase you want to see what im talking about

navigation

    <nav class="navbar navbar-expand-lg navbar-dark">
      <div class="container">
        <p class="navbar-brand" style="color:  black; font-family: Balsamiq Sans, cursive;"><strong> <img src="media/img/Logos/Nexus Development Logo.png" class="logo">Nexus Development</strong></p>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" style="color: black;font-family: monospace;" href="./index.html"><strong>Home</strong>
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" style="color:  black; font-family: monospace;" href="./news.html"><strong>News</strong></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" style="color:  black; font-family: monospace; " href="./signin.html"><strong>Sign-in</strong></a>
            </li>
             <li class="nav-item">
              <a class="nav-link" style="color:  black; font-family: monospace; " href="./store.html"><strong>Store</strong></a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <h1 class="heroh1">Nexus Development<span class="herospan">- Where Dreams Come True -</span></h1>
  </div>

css

body {
  /* background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
 */
 background-color: white;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 100%;
  font-family: "Balsamiq Sans", cursive;
 
}

.navbar {
  postion: fixed;
}
a:hover {
color: white;
text-decoration: none;
}
a:link {
 color:  black;
}
a:visited {
  border: 2px solid black;
  color: white;
}
a:hover, a:active {
background-color: white;
color: white;
text-decoration: none;
}

.btn {
  color: black;
  background-color: white;
  border: white;
}

.btn:hover {
  background-color: white;
  color: black;
  border: white;
}
  footer {
    position: bottom;
    width: 100%;
    padding: 10px;
    left: 0;
    bottom: 0;
    color: black;
    text-align: center;
    clear: both;
  }


  @import url(https://fonts.googleapis.com/css?family=Open+Sans:600,300);
* {
    margin: 0;
    padding: 0;
}
.hero {
    height: 100vh;
    background: linear-gradient(45deg, rgba(255,175,189,.7), rgba(100,216,243,.7), rgba(234,236,198,.7), rgba(245,146,176,.7), rgba(52,219,216,.7)) 0 0 / 1000% no-repeat, url(https://picsum.photos/g/2000/1200?image=443) 0 0 / cover no-repeat;
    -webkit-animation: gradientAnimation 40s ease infinite;
    animation: gradientAnimation 40s ease infinite;
}
@-webkit-keyframes gradientAnimation {
    0%   { background-position: 0% 30%, 0 0;}
    50%  { background-position: 100% 70%, 0 0;}
    100% { background-position: 0% 30%, 0 0;}
}
@keyframes gradientAnimation {
    0%   { background-position: 0% 30%, 0 0;}
    50%  { background-position: 100% 70%, 0 0;}
    100% { background-position: 0% 30%, 0 0;}
}
.heroh1 {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font : normal 600 72px/1 'Open Sans', sans-serif;
    text-align: center;
    white-space: nowrap;
}
.heroh1 .herospan {
    display: block;
    margin-top: 1em;
    font-size: 40px;
    font-weight: 300;
}

.logo {
  width: 75px;
  height: 75px;
  padding: 10px; 
}

Answer 1

Looking at your live site, change the .navbar attributes from:

position: relative;
display: flex;
..etc

To:

position: sticky;
display: flex;
top: 0;
left: 0;
z-index: 10;

The z-index is because you have no background color, so by setting that it will make sure the nav always hovers over your content. If you end up putting a background color behind it you can still leave the z-index in there just to ensure that it moves over the rest of your content. Let me know if that gets you where you want to be and if not we'll troubleshoot further. :)