How to set navigation menu to fill remaining vertical space after navigation bar with no fixed height?

Question

I would like to make the make the menu fill the remaining vertical space without scrolling. I've experimented with position: absolute and heights but nothing seems to work. Anyone have any suggestions? Maybe I need to structure my HTML differently? Any help appreciated (: Sorry for the poor formatting of the question, still quiet new to stackoverflow.

Here is a video showing the functionality of the navigation menu:

https://gyazo.com/809fcd5c6c665f37a9f467164404a297

Here is a image:

Below is my HTML,CSS and JS CODE:

<body>
    <header class="header">
      <div class="header-section-1 flex flex-jc-sb flex-ai-c">
        <a href="#" class="company flex flex-ai-c">
          <div class="company-logo"></div>
          <div class="logo-text flex flex-d-col flex-ai-c">
            <p class="logo-text-main">punitham</p>
            <p class="logo-sub-text">disabiltiy service</p>
          </div>
        </a>

        <div class="menu-toggle flex flex-d-col flex-jc-sb">
          <span class="one bar"></span>
          <span class="two bar"></span>
          <span class="three bar"></span>
          <span class="four bar"></span>
        </div>
      </div>

      <div class="header-section-2">
        <a href="#" class="call-btn flex flex-jc-c flex-ai-c">
          <i class="fa-solid fa-phone"></i>
          <p class="ph-number">03 4561 2795</p>
        </a>
      </div>

      <nav class="navigation hidden">
        <ul class="nav-list">
          <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Careers</a></li>
          <li class="nav-item"><a href="#" class="nav-link">About Us</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Contact Us</a></li>
        </ul>
      </nav>
    </header>

    <script src="./script.js"></script>
  </body>

.flex {
  display: flex;
}

.flex-jc-c {
  justify-content: center;
}

.flex-jc-sb {
  justify-content: space-between;
}

.flex-ai-c {
  align-items: center;
}

.flex-d-col {
  flex-direction: column;
}

.hidden {
  display: none;
}

.header {
  background-color: black;
  color: white;
}

.header-section-1 {
  width: 90%;
  margin: 0 auto;
  padding: 1.5em 0;
}

.company {
  color: white;
  text-decoration: none;
}

.company-logo {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: white;
  outline: 1px solid black;
  outline-offset: -5px;
}

.logo-text {
  margin-left: 10px;
}

.logo-text-main {
  text-transform: capitalize;
  font-weight: 700;
  font-size: 1.7rem;
}

.logo-sub-text {
  text-transform: uppercase;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 1px;
  margin-top: -10px;
}

.menu-toggle {
  height: 20px;
  width: 30px;
  cursor: pointer;
}

.bar {
  display: block;
  background-color: white;
  height: 3px;
  width: 100%;
}

.menu-toggle,
.one,
.two,
.three {
  transition-duration: 0.3s;
}

.menu-toggle.on {
  transform: rotate(45deg);
}

.menu-toggle.on .one {
  opacity: 0;
  /* transform: translateY(9px) rotate(90deg); */
}

.menu-toggle.on .two {
  opacity: 0;
  /* transform: translateY(3px); */
}
.menu-toggle.on .three {
  transform: translateY(-3px);
}

.menu-toggle.on .four {
  transform: translateY(-9px) rotate(90deg);
}

.header-section-2 {
  background-color: lightcoral;
  padding: 0.7em 0;
}

.call-btn {
  text-decoration: none;
  color: white;
}

.ph-number {
  font-weight: 600;
  margin-left: 10px;
}

.nav-list {
  list-style: none;
  background-color: lightblue;
  text-align: center;
}

.nav-link {
  font-weight: 100;
  text-decoration: none;
  display: block;
  color: white;
  font-size: 2rem;
  transition-delay: 0.4s;
  transition: 0.4s;
}

.nav-link:hover,
.nav-link:focus {
  color: lightcoral;
}

document.querySelector(".menu-toggle").addEventListener("click", function () {
  this.classList.toggle("on");
  const callBtn = document.querySelector(".header-section-2");
  callBtn.classList.toggle("hidden");
  const nav = document.querySelector(".navigation");
  nav.classList.toggle("hidden");
});

Answer 1

Just add height: 100vh in .nav-list

  .nav-list {
      list-style: none;
      background-color: lightblue;
      text-align: center;
      height: 100vh;
    }

 document.querySelector(".menu-toggle").addEventListener("click", function () { this.classList.toggle("on"); const callBtn = document.querySelector(".header-section-2"); callBtn.classList.toggle("hidden"); const nav = document.querySelector(".navigation"); nav.classList.toggle("hidden"); });

 .flex { display: flex; } .flex-jc-c { justify-content: center; } .flex-jc-sb { justify-content: space-between; } .flex-ai-c { align-items: center; } .flex-d-col { flex-direction: column; } .hidden { display: none; } .header { background-color: black; color: white; } .header-section-1 { width: 90%; margin: 0 auto; padding: 1.5em 0; } .company { color: white; text-decoration: none; } .company-logo { height: 30px; width: 30px; border-radius: 50%; background-color: white; outline: 1px solid black; outline-offset: -5px; } .logo-text { margin-left: 10px; } .logo-text-main { text-transform: capitalize; font-weight: 700; font-size: 1.7rem; } .logo-sub-text { text-transform: uppercase; font-size: 0.6rem; font-weight: 400; letter-spacing: 1px; margin-top: -10px; } .menu-toggle { height: 20px; width: 30px; cursor: pointer; } .bar { display: block; background-color: white; height: 3px; width: 100%; } .menu-toggle, .one, .two, .three { transition-duration: 0.3s; } .menu-toggle.on { transform: rotate(45deg); } .menu-toggle.on .one { opacity: 0; /* transform: translateY(9px) rotate(90deg); */ } .menu-toggle.on .two { opacity: 0; /* transform: translateY(3px); */ } .menu-toggle.on .three { transform: translateY(-3px); } .menu-toggle.on .four { transform: translateY(-9px) rotate(90deg); } .header-section-2 { background-color: lightcoral; padding: 0.7em 0; } .call-btn { text-decoration: none; color: white; } .ph-number { font-weight: 600; margin-left: 10px; } .nav-list { list-style: none; background-color: lightblue; text-align: center; height: 100vh; } .nav-link { font-weight: 100; text-decoration: none; display: block; color: white; font-size: 2rem; transition-delay: 0.4s; transition: 0.4s; } .nav-link:hover, .nav-link:focus { color: lightcoral; }

 <body> <header class="header"> <div class="header-section-1 flex flex-jc-sb flex-ai-c"> <a href="#" class="company flex flex-ai-c"> <div class="company-logo"></div> <div class="logo-text flex flex-d-col flex-ai-c"> <p class="logo-text-main">punitham</p> <p class="logo-sub-text">disabiltiy service</p> </div> </a> <div class="menu-toggle flex flex-d-col flex-jc-sb"> <span class="one bar"></span> <span class="two bar"></span> <span class="three bar"></span> <span class="four bar"></span> </div> </div> <div class="header-section-2"> <a href="#" class="call-btn flex flex-jc-c flex-ai-c"> <i class="fa-solid fa-phone"></i> <p class="ph-number">03 4561 2795</p> </a> </div> <nav class="navigation hidden"> <ul class="nav-list"> <li class="nav-item"><a href="#" class="nav-link">Home</a></li> <li class="nav-item"><a href="#" class="nav-link">Services</a></li> <li class="nav-item"><a href="#" class="nav-link">Careers</a></li> <li class="nav-item"><a href="#" class="nav-link">About Us</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact Us</a></li> </ul> </nav> </header> <script src="./script.js"></script> </body>

How to set navigation menu to fill remaining vertical space after navigation bar with no fixed height?

Question

1 answers

solution1
0 2022-07-15 13:35:05

How to set navigation menu to fill remaining vertical space after navigation bar with no fixed height?

Question

1 answers

solution1 0 2022-07-15 13:35:05

solution1
0 2022-07-15 13:35:05