How to Stop Nav Background Height From Changing as I add Elements Vertically CSS/HTML?

I am just starting my first public site and I ran into an issue. I want to make my logo for it circular(which I have already done) on the navbar, and then make it halfway between the end of the navbar and the body. I want to know how to add bottom padding or add elements further down to the navbar vertically without it changing how far down the Navbar background(white) ends. The website URL right now is https://fruitfulorientation.gq/.

more source code for it: https://replit.com/@CreativeDrone/LGBTQIA-orientation#style.css

My code for the navbar:

<nav>
    <a href="index.html"><img src="https://LGBTQIA-orientation.creativedrone.repl.co/navspacer.png"></a>
    <ul class="navlinks">
      <a href="index.html" class="a">Home</a>
      <a href="" class="b">Genders</a>
      <a href="" class="c">Sexualities</a>
      <a href="" class="d">Quiz</a>
      <a href="" class="f">Donate</a>
      <a href="" class="g">About</a>
    </ul>
    <div class="navlogofinal">
    <img class="navlogo" src="https://LGBTQIA-orientation.creativedrone.repl.co/CreativeDrone-logoss_transparent.png" alt="navlogo">
    </div>
  </nav>
</div>

My CSS code for the navbar:

reset styling is above this

.nav::before {
  content:"";
  background: linear-gradient(90deg, #ff3838, #ff9d14, #fbff1a, #57ff1a, #1f26ff, #bb00ff);
  position: absolute;
  height: 13%;
  width: 37%;
  z-index: -1;
  filter: blur(20px);
  left:30%;
} 
nav {
  display: inline-flex;
  background-color: #ffffff;
  width: 50%;
  left: 50%;
  transform: translateX(50%);
  margin: 0 auto;
  border-style: solid;
  border-radius: 15px;
}

.navlinks {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 0px;
  overflow: hidden;
  display: flex; 
}

.a {
  font-family: 'Mulish', sans-serif;
  margin-right:15px;
  text-decoration: none;
  color:#ff4747;
  font-weight: 600;
  font-size:20px;
}

.a:hover {
  color: #932f2f;
}

.b {
  font-family: 'Mulish', sans-serif;
  margin-right:15px;
  text-decoration: none;
 color:#ffba24;
  font-weight: 600;
  font-size:20px;
}

.b:hover {
  color: #ae811e;
}

.c {
  font-family: 'Mulish', sans-serif;
  margin-right:15px;
  text-decoration: none;
  color:#ffee33;
  font-size:20px;
}

.c:hover {
  color: #998f24;
}

.d {
  font-family: 'Mulish', sans-serif;
  margin-right:15px;
  text-decoration: none;
  color:#5fff33;
  font-weight: 600;
  font-size:20px;
}

.d:hover {
  color:#3c9c21;
}

.f {
  font-family: 'Mulish', sans-serif;
  margin-right:15px;
  text-decoration: none;
  color:#4b33ff;
  font-weight: 600;
  font-size:20px;
}

.f:hover {
  color: #2b1e8f;
}

.g {
  font-family: 'Mulish', sans-serif;
  margin-right:15px;
  text-decoration:none;
  color:#6b136c;
  font-weight: 600;
  font-size:20px;
}

.g:hover {
  color: #2e0a2f;
}

.navlogo {
  position: relative;
  display: block;
  max-width: 60px;
  max-height: 60px;
  border-radius:100px;
  background-color:#f0f0f0;
  margin: auto;
}

.navlogofinal {
 display: block;
  margin-left: calc(50% - 86px);
  transform: translateX(-50%);
  padding-top: 40px;
}

An example of what I want to do is the logo bordering the body and footer of this site:
https://www.amitmerchant.com/

>Solution :

I am not sure if I understood the requirement correctly but here is what I think the solution might be. I added a fixed height to the nav as highlighted in the first picture

I added a transform: translate x and y css property as highlighted in the second picture. You can also see the output from the pictures

Here are the 2 changed styles. You can also check to see if any of the other css properties are really required:

nav {
  display: inline-flex;
  background-color: #ffffff;
  width: 50%;
  left: 50%;
  transform: translateX(50%);
  margin: 0 auto;
  border-style: solid;
  border-radius: 15px;
  height: 90px
}

.navlogofinal {
 display: block;
  margin-left: calc(50% - 86px);
  transform: translate(-50%, 65%);
}