Active navigation bar with main content

Question

I have a problem with my active navigation bar. When I open the hamburger menu than the main content stay fixed and does not moving with the open navigation menu. I was looking on the internet, but i did not find something what can help me or how to solve it. I am sending here my code. If anycone can help with this i will be happy. What can i do? How to repair it?

Thanks.

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
  <header>
    <div class="logo">Logo</div>
    <div class="hamburger">
      <div class="lines"></div>
    </div>
    <nav class="nav-bar">
      <ul>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
      </ul>
    </nav>
    <script>
      hamburger = document.querySelector(".hamburger");
      hamburger.onclick = function () {
        navBar = document.querySelector(".nav-bar");
        navBar.classList.toggle("active");
      }
    </script>
  </header>
  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate nihil corporis ut praesentium accusantium possimus molestiae reprehenderit quam nostrum distinctio repudiandae iure aliquam repellat unde recusandae quas ipsam. Dicta animi.</p>
  </main>
</body>
</html>

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  background: #fff;
  font-size: 100%;
}
/* NAVIGATION */
header {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25em 6.25em;
  border-bottom: 1px solid #000;
}
.logo {
  width: 50%;
}
.hamburger {
  display: none;
}
.nav-bar ul {
  display: flex;
}
.nav-bar ul li a {
  display: block;
  color: #000;
  font-size: 1.375em;
  padding: 0.4545454545454545em 0.6818181818181818em;
  border-radius: 50px;
  transition: all 0.5s ease-in-out;
  margin: 0 0.2272727272727273em;
}
.nav-bar ul li a:hover {
  color: #fff;
  background: #ffb038;
}

.fa-solid {
  margin-right: 0.6818181818181818em;
  vertical-align: middle;
}
@media only screen and (max-width: 1770px) {
  .nav-bar ul li a i {
    display: block;
  }
}
@media only screen and (max-width: 1400px) {
  header {
    padding: 0px 1.5625em;
  }
  .hamburger {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
  }
  .lines {
    width: 50px;
    height: 6px;
    background-color: #ffb038;
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
  }
  .lines::before,
  .lines::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 6px;
    background-color: #ffb038;
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
  }
  .lines::before {
    transform: translateY(-16px);
  }
  .lines::after {
    transform: translateY(16px);
  }
  .hamburger.open .lines {
    transform: translateX(-50px);
    background: transparent;
  }
  .hamburger.open .lines::before {
    transform: rotate(45deg) translate(35px, -35px);
  }
  .hamburger.open .lines::after {
    transform: rotate(-45deg) translate(35px, 35px);
  }
  .nav-bar {
    height: 0;
    position: absolute;
    top: 65px;
    left: 0;
    right: 0;
    width: 100vw;
    background: #ffb038;
    transition: 0.5s;
    overflow: hidden;
  }
  .nav-bar.active {
    height: 28.125em;
    transition: all 0.5s ease-in-out;
    margin-top: 15px;
  }
  .nav-bar ul {
    display: block;
    width: fit-content;
    margin: 5em auto 0 auto;
    text-align: center;
    transition: all 0.5s ease-in-out;
    opacity: 0;
  }
  .nav-bar.active ul {
    opacity: 1;
    display: block;
  }
  .nav-bar ul li a {
    margin-bottom: 0.75em;
  }
  .nav-bar ul li a:hover {
    color: #000;
    background: white;
  }
}

So you want the Lorem ipsum text to be scrolled down (and be visible) when the hamburger menu is open. Correct? — jollyjoyce1995, Feb 07 '23 at 13:21
You can toggle a class which has margin-top on main tag when hamburger menu is clicked — CodeThing, Feb 07 '23 at 14:05
You should **always declare your variables**: Assignments to undeclared variables in non-strict mode create a properties of similar name on the global object, which is usually highly unwanted. In strict-mode, this would even throw an error. — Oskar Grosser, Feb 07 '23 at 14:29

score 0 · Accepted Answer · answered Feb 07 '23 at 14:24

In your media-query you are taking .nav-bar out of the flow with position: absolute, meaning it cannot affect e.g. main.

Adding a wrapper around .logo and .hamburger allows us to keep .nav-bar as its sibling in the flow:

<!--Before:-->
<header>
  <div class="logo">Logo</div>
  <div class="hamburger">
    <div class="lines"></div>
  </div>
  <nav class="nav-bar"><!--...--></nav>
</header>

<!--After:-->
<header>
  <div><!--The wrapper-->
    <div class="logo">Logo</div>
    <div class="hamburger">
      <div class="lines"></div>
    </div>
  </div>
  <nav class="nav-bar"><!--...--></nav>
</header>

This wrapper will replace before's header in terms of CSS. The result may look like this:

const hamburger = document.querySelector(".hamburger");
const navBar = document.querySelector(".nav-bar");

hamburger.addEventListener("click", () => navBar.classList.toggle("active"));

.nav-bar {
  width: 100%;
  background: #ffb038;
  overflow: hidden;
}
.nav-bar:not(.active) {
  height: 0;
}

.nav-bar a {
  padding: 0.5em 0.7em;
  width: 100%;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  font-size: 1.375em;
  text-align: center;
}

/*Wrapper (styled as before's header) - Mobile style*/
#wrapper {
  padding: 0px 1.5625em;
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/*Default style*/
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
  font-family: sans-serif;
  color: black;
}
.hamburger {
  width: 80px;
  height: 80px;
  background-color: orange;
  cursor: pointer;
}

<body>
  <header>
    <div id="wrapper"><!--New wrapper-->
      <div class="logo">Logo</div>
      <div class="hamburger"></div>
    </div>
    <nav class="nav-bar">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    Lorem ipsum set amet.
  </main>
</body>

To effectively transition height property, you can transition max-height. You may want to use custom properties:

const hamburger = document.querySelector(".hamburger");
const navBar = document.querySelector(".nav-bar");

hamburger.addEventListener("click", () => navBar.classList.toggle("active"));

// Example of setting `--links` property:
navBar.style.setProperty("--links", navBar.querySelectorAll("a").length);

.nav-bar {
  --links: 3; /*Example of setting `--links` property*/
  --link-height: 48px;
  max-height: calc(var(--links, 0) * var(--link-height));
  transition: max-height .25s ease;
}
.nav-bar:not(.active) {
  max-height: 0;
}
.nav-bar a {
  height: var(--link-height);
}

/*Remove `height` declarations from .nav-bar and related; otherwise same as before:*/
.nav-bar {
  width: 100%;
  background: #ffb038;
  overflow: hidden;
}

.nav-bar a {
  padding: 0.5em 0.7em;
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
  font-size: 1.375em;
  text-align: center;
}

#wrapper {
  padding: 0px 1.5625em;
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
  font-family: sans-serif;
  color: black;
}
.hamburger {
  width: 80px;
  height: 80px;
  background-color: orange;
  cursor: pointer;
}

<body>
  <header>
    <div id="wrapper">
      <div class="logo">Logo</div>
      <div class="hamburger"></div>
    </div>
    <nav class="nav-bar" style="--links:3"><!--Example of setting `--links` property-->
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    Lorem ipsum set amet.
  </main>
</body>

Active navigation bar with main content

1 Answers1