Navbar(Menu) Is Getting Overlapped by Body Element

navbar(menu) is getting overlapped by body element

set to nav z-index: 1;
You Can Also Learn z-index poperty and wow it work w3schools.com

body {margin:0;}
div.box {  margin: 30px;  background-color: #333;  border: 1px solid black;  opacity: 0.6;  font-size: 20px;  filter: alpha(opacity=60); /* For IE8 and earlier */} div.box p {  margin: 5%;  font-weight: normal;  color: #ffffff;}
.navbar {  overflow: hidden;  background-color: #333;  position: fixed;  top: 0;  width: 100%;   z-index: 1;}
.navbar a {  float: left;  display: block;  color: #f2f2f2;  text-align: center;  padding: 14px 16px;  text-decoration: none;  font-size: 17px;}
.navbar a:hover {  background: #ddd;  color: black;}
.main {  padding: 16px;  margin-top: 30px;  height: 1500px; /* Used in this example to enable scrolling */}

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"></head><body>
<div class="navbar">  <a href="#home">Home</a>  <a href="#news">News</a>  <a href="#contact">Contact</a></div>
<div class="main">  <h1>Fixed Top Menu</h1>  <h2>Scroll this page to see the effect</h2>  <h2>The navigation bar will stay at the top of the page while scrolling</h2>
    <div class="box">    <h2 style="color:white; text-align:center">Some text some text </h2>           <p>Some text some text Some text some text Some text some text Some text some text... </p>           <p>Some text some text some text some text..</p>  <p>Some text some text some text some text..</p>    <p>Some text some text some text some text..</p>  <p>Some text some text some text some text..</p>      </div>  <p>Some text some text some text some text..</p>  <p>Some text some text some text some text..</p>  <p>Some text some text some text some text..</p>  <p>Some text some text some text some text..</p></div>
</body></html>

Bootstrap 4 navbar menu overlapping body content

The navbar has a min-height of 50px but I think it's being pushed larger by the images of flags on the right.

The body has an padding-top of 50px making the navbar overlap te body for the extra space.

One way to fix this is increase the padding-top on your body element.

Bootstrap navbar overlapping body content

Acoording to bootstrap navbar-fixed-top docs:
###Body padding required

The fixed navbar will overlay your other content, unless you add
padding to the top of the <body>. Try out your own values or use our
snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

I think if it takes two lines on non-mobile viewport, you can set

@media screen and (min-width: 768px) {
    body { padding-top: 100px; }
}

HTML input elements overlap absolute navbar

You have two issues.

Your toggle checkbox shows. You could apply some standard techniques to the checkbox to move it off screen. Note that I've also added aria-hidden="true" to prevent screen readers from announcing it.

.offscreen {
  position: absolute;
  left: -999em;
}

Your form checkbox shows over the menu because of the transform. If you disable the scaling rule you see it disappear. You can add a low z-index value to the menu to resolve this.

.menu {
  ...
  z-index: 9;
}

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

body {
  background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(src/assets/images/background2.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
}

.offscreen {
  position: absolute;
  left: -999em;
}

.login,
.register {
  width: 400px;
  background-color: #ffffff;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  margin: 100px auto;
}

.login h1,
.register h1 {
  text-align: center;
  color: #5b6574;
  font-size: 24px;
  padding: 20px 0 20px 0;
  border-bottom: 1px solid #dee0e4;
}

.login .links,
.register .links {
  display: flex;
  padding: 10px 15px;
}

.login .links a,
.register .links a {
  color: #adb2ba;
  text-decoration: none;
  display: inline-flex;
  padding: 0 10px 10px 10px;
  font-weight: bold;
}

.login .links a:hover,
.register .links a:hover {
  color: #9da3ac;
}

.login .links a.active,
.register .links a.active {
  border-bottom: 3px solid #547430;
  color: #547430;
}

.login form,
.register form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 20px;
}

.login form label,
.register form label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12%;
  height: 50px;
  background-color: #547430;
  color: #ffffff;
}

.login form input[type="password"],
.login form input[type="text"],
.login form input[type="email"],
.register form input[type="password"],
.register form input[type="text"],
.register form input[type="email"] {
  width: 80%;
  height: 50px;
  border: 1px solid #dee0e4;
  margin-bottom: 20px;
  padding: 0 15px;
}

.login form input[type="submit"],
.register form input[type="submit"] {
  width: 100%;
  padding: 15px;
  margin-top: 20px;
  background-color: #547430;
  border: 0;
  cursor: pointer;
  font-weight: bold;
  color: #ffffff;
  transition: background-color 0.2s;
  border-radius: 0;
  -webkit-border-radius: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.login form input[type="submit"]:hover,
.register form input[type="submit"]:hover {
  background-color: #2868c7;
  transition: background-color 0.2s;
}

.login form #rememberme,
.register form #rememberme {
  width: 100%;
  height: auto;
  padding: 5px 20px;
  background-color: transparent;
  color: #000;
  justify-content: flex-start;
}

.login form #rememberme input,
.register form #rememberme input {
  transform: scale(1.3);
  margin-right: 7px;
}

.login form .msg,
.register form .msg {
  padding: 0 20px;
  width: 100%;
}

.login form>a,
.register form>a {
  text-decoration: none;
  color: #5b6574;
  width: 100%;
  padding: 5px 20px;
}

.login form>a:hover,
.register form>a:hover {
  color: #394049;
}

@media screen and (max-width: 400px) {
  .login,
  .register {
    width: 95%;
  }
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #547430;
  color: #fff;
}

.nav-links a {
  color: #fff;
}


/* LOGO */

.logo {
  font-size: 32px;
  font-family: Rockwell;
}


/* NAVBAR MENU */

.menu {
  display: flex;
  gap: 1em;
  font-size: 18px;
  z-index: 9;
}

.menu li:hover {
  background-color: #7ead47;
  border-radius: 5px;
  transition: 0.3s ease;
}

.menu li {
  padding: 5px 14px;
  font-weight: bold;
}


/* DROPDOWN MENU */

.services {
  position: relative;
}

.dropdown {
  background-color: rgb(1, 139, 139);
  padding: 1em 0;
  position: absolute;
  /*WITH RESPECT TO PARENT*/
  display: none;
  border-radius: 8px;
  top: 35px;
}

.dropdown li+li {
  margin-top: 10px;
}

.dropdown li {
  padding: 0.5em 1em;
  width: 8em;
  text-align: center;
}

.dropdown li:hover {
  background-color: #4c9e9e;
}

.services:hover .dropdown {
  display: block;
}


/*RESPONSIVE NAVBAR MENU STARTS*/


/* CHECKBOX HACK */


/*HAMBURGER MENU*/

.hamburger {
  display: none;
  font-size: 24px;
  user-select: none;
}


/* APPLYING MEDIA QUERIES */

@media (max-width: 900px) {
  .menu {
    display: block;
    position: absolute;
    background-color: #547430;
    margin-top: 5px;
    text-align: left;
    height: 100%;
    width: 100%;
    padding: 16px 0;
    transition: all 0.3s ease;
    left: -100%;
  }
  .menu li:hover {
    display: inline-block;
    background-color: #7ead47;
    transition: 0.3s ease;
  }
  .menu li+li {
    margin-top: 12px;
  }
  input[type=checkbox]:checked~.menu {
    left: 0%;
  }
  .hamburger {
    display: block;
  }
  .dropdown {
    left: 50%;
    top: 30px;
    transform: translateX(35%);
  }
  .dropdown li:hover {
    background-color: #4c9e9e;
  }
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>EWA</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>

<body>
  <nav class="navbar">
    <div class="logo">Audio Diary</div>
    <ul class="nav-links">

      <!-- USING CHECKBOX HACK -->
      <input type="checkbox" id="checkbox_toggle" class="offscreen" aria-hidden="true" />
      <label for="checkbox_toggle" class="hamburger">☰</label>

      <!-- NAVIGATION MENUS -->
      <div class="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/">Explore</a></li>
        <li><a href="/">Info</a></li>
        <li><a href="/login">Login</a></li>
      </div>
    </ul>
  </nav>

  <div class="login">
    <h1>Login</h1>
    <div class="links">
      <a href="/login" class="active">Login</a>
      <a href="/register">Register</a>
    </div>
    <form action="" method="post">
      <label for="email">
        <i class="fas fa-envelope"></i>
      </label>
      <input type="text" name="email" placeholder="Email" id="email" required>
      <label for="password">
        <i class="fas fa-lock"></i>
      </label>
      <input type="password" name="password" placeholder="Password" id="password" required>
      <label id="rememberme">
        <input type="checkbox" name="rememberCode">Remember me
      </label>
      <a href="/forgotpassword">Forgot Password?</a>
      <div class="msg"></div>
      <input type="submit" value="Login">
    </form>
  </div>

</body>

</html>

How to prevent javascript element from rendering over collapsible Navbar Menu

Found the answer, I moved my nav into:

<div style="position:relative; z-index:10"></div>

Why is my button overlapping my navbar when scrolling?

Here you go, z-index is really good for that. When you have z-index, it's basically what you want in front. So here, I put z-index in the .container class, and you can see that the navbar is always up front.

.container
{
    position: sticky;
    top: 0;
    position: -webkit-sticky;
    background: #FACABC;
    z-index:1;
}
    
nav
{

    z-index: 9999;
}
/* Nav bar*/
.container nav
{
    width: 100%;
    height: 76px;
    
    
    font-size: 48px;
    padding-left: 7em; /* Centers "Home, About me, Socials, etc" text */
}
.container nav a
{
    text-align: center;
    text-decoration: none;
    color: #987b74;
    padding-right: 100px;
}
.container nav ul
{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    list-style-type: none;
    transition: all 0.5s ease;
}
.container nav ul li
{
    width: 10%;
    float: left;
    text-align: center;
    color: #987b74;
    font-size: 41px;
    font-weight: bold;
    transition: all 0.5s ease;
    position: sticky;
    cursor: pointer;
    top: 0;
}
.container nav ul li:hover
{
    color: #5E4C47;
}   
.container nav ul li ul.sub-nav 
{
    position: absolute;
    background: white; /* Background of drop down */
    width: 75%;
    height: 110px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.14), -1px 0px 1px rgba(0,0,0,0.14);
    top: 75px;
    left: 0;
    visibility: hidden;
    opacity: 0;
}
.container nav ul li ul.sub-nav li
{

    font-size: 31px;
    font-family: primer, "Times New Roman", sans-sarif;
    width: 75%;
}

.container nav ul li:hover ul.sub-nav /* Drop down menu visibility */
{
    visibility: visible;
    opacity: 75%;
    margin-top: 2px;
}
.container li
{
    display: inline-block;
}
.container nav ul li ul.sub-nav a:hover
{
    color: #5E4C47;
    transition: all 0.5s ease;
}
.container nav ul li ul.sub-nav a
{
    padding: 0;
}
main h2
{
    padding-right: 10em;
    padding-left: 10em;
}
main .learn-more {
  border-radius: 2px;
  background-color: #FACABC;
  border: none;
  color: #987b74;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 275px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
font-family: primer, "Times New Roman", sans-sarif;
}

main .learn-more span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

main .learn-more span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

main .learn-more:hover span {
  padding-right: 25px;
}

main .learn-more:hover span:after {
  opacity: 1;
  right: 0;
}

<!DOCTYPE html>
<div id="wrapper">
<title>HighItsKy</title>
<link href="highitsky.css" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">     
<body>
    <header>
        <a id="homelink" href="index.html"><h2 id="homelink">HighItsKy</h2></a>
        <br><br><br>
        <br>
        <span class="title"><h1>HighItsKy</h1></span>
        <h2>part time streamer, full time vibe</h2>
        <br><br>
        <a href="https://www.twitch.tv/highitsky/" target="_blank"><ion-icon name="logo-twitch"></ion-icon></a>
        <a href="https://discord.gg/M2umXEhkNq" target="_blank"><ion-icon name="logo-discord"></ion-icon></a>
        <a href="https://youtube.com/highitsky" target="_blank"><ion-icon name="logo-youtube"></ion-icon></a>
        <a href="https://www.instagram.com/highitsky_/" target="_blank"><ion-icon name="logo-instagram"></ion-icon></a>
        <a href="https://www.tiktok.com/@highitsky" target="_blank"><ion-icon name="logo-tiktok"></ion-icon></a>
        <a href="https://www.twitter.com/highitsky_/" target="_blank"><ion-icon name="logo-twitter"></ion-icon></a>
        <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
        <br><br><br><br><br>
    </header>
    <div class="container">
    <nav>
        <ul>
            <a href="index.html"><li>Home</li></a>
            <li>About Me
                <ul class="sub-nav">
                    <a href="AboutMe.html"><li>ABOUT</li></a>
                    <a href="Cloves.html"><li>CLOVES</li></a>
                </ul>
            </li>
            <li>Socials
                <ul class="sub-nav">
                    <a href="Socials.html"><li>SOCIALS</li></a>
                    <a href="Contact.html"><li>CONTACT</li></a>
                </ul></li>
            <a href="Community.html"><li>Community</li></a>
            <a href="Partnerships.html"><li>Partnerships</li></a>
            <li>Support
                <ul class="sub-nav">
                    <a href="Donate.html"><li>DONATE</li></a>
                    <a href="Merch.html"><li>MERCH</li></a>
                    <a href="Organizations.html"><li>OTHER</li></a>
                </ul></li>
        </ul>
    </nav>
        <div class="header"></div>
    </div>
<main>
<div class="backgroundcolor">
    <br><br><h1>High, I'm Ky<h1><br>
    <h2>I started streaming on Twitch in February of 2020, with my streams mainly consisting of Minecraft content! 
    Whether I am dying a lot in Singleplayer or getting scared by creepers, my main focus is maintaining a positive and welcoming 
    community in a not-so-welcoming world. I currently live in Kansas, and I am 19 years old and majoring in Computer Science at FHSU. . . </h2>
    <br>
    <a href="AboutMe.html"><button class="learn-more"><span>LEARN MORE </span></button></a>
    <br><br><br><br><br>
</div>
    <div class="video-trailer">
    <br><br>
        <h2>My streams consist of a lot of yelling, dying, losing, and sometimes crying, but...</h2>
    <br><br>
    <center>
    <video controls="controls" height="64%" width="62%" style='border: 2px solid #FACABC;'>
        <source src="trailer.mp4" type="video/mp4">
    </video>
    <br><br>
        <h2>what matters is that I get to spend time with the people that I love; my community!</h2>
    <br><br>
    </div>
<div class="backgroundcolor">
    <br><br>
    <h1>High-lights</h1>
    <br><br>
    <hr size="2" color="#987b74">
    <br><br>
    <ul>
        <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/HQQ3LfzPrEI" 
            title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
        </li>
        <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/zNUe4U8ps5k" 
            title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
        </li>
        <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/Sh7yxSijuxI" 
            title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
        </li>
        <br><br>
        <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/PGgvM_9pZok" 
            title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
        </li>
        <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/S_M8JgzfdW4" 
            title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
            
        </li>
        <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/Pk0GZE-3EqQ" 
            title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
        </li>
    </ul>
    <br><br>
    <hr size="2" color="#987b74">
<footer>HighItsKy © 2020 </footer>
</div>
</main>

Twitter Bootstrap 3 - Navbar Fixed Top - Overlaps content when multiple lines

$(window).on('resize load', function() {
    $('body').css({"padding-top": $(".navbar").height() + "px"});
});

Navbar(Menu) Is Getting Overlapped by Body Element