Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

Why Aren't All The Items In My Ul Displayed?

Post a Comment
I'm trying to create a responsive navbar, but not all the items from my ul are showing, PROBLEM:

Solution 1:

You've dropped the .container__navbar down the viewport by 65 pixels. You need to take this off the 100% height using height:calc(100% - 65px);

console.log('works')
    
    document.querySelector('.container__hamburger').addEventListener('click', ()=>{
        document.querySelector('.container__navbar').classList.toggle('showMenu')
    })
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
    
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .container {
      display: flex;
      background-color: #2b2f33;
      width: 100%;
      height: 65px;
    }
    
    .container__navbar {
      display: flex;
      font-family: "Roboto", sans-serif;
      width: 100%;
    }
    
    .container__logo {
      display: inline;
      width: 25%;
      margin-right: 30px;
      margin-left: 10px;
    }
    
    .navbar__list {
      display: flex;
      width: 100%;
      list-style: none;
      align-items: center;
      color: #ffffff;
    }
    
    .list__item{
      margin-right: 30px;
    }
    
    
    .container__hamburger {
      display: none;
      color: #ffffff;
      align-self: center;
    }
    
    @media (max-width: 890px) {
    
      .container {
        position: fixed;
      }
    
      .container__navbar {
        position: fixed;
        height: calc(100% - 65px);
        left: 0;
        top: 65px;
        transition: 0.5s;
        background-color: #2b2f33;
        transform: translateX(-100%);
        width: 250px;
      }
    
      .showMenu {
        transform: translateX(0);
      }
    
      .navbar__list {
        display: block;
        overflow-x: hidden;
        overflow-y: scroll;
      }
    
      .container__hamburger {
        display: block;
        margin-left: auto;
        margin-right: 30px;
      }
    
      .list__item {
        width: 100%;
        padding: 10px;
      }
    
    }
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>Document</title><linkrel="stylesheet"href="styles.css" /></head><body><divclass="container"><imgclass="container__logo"src="assets/images/gamezonia.png"alt="logo"
          /><navclass="container__navbar"><ulclass="navbar__list"><liclass="list__item">Home</li><liclass="list__item">Category 1</li><liclass="list__item">Category 2</li><liclass="list__item">Category 3</li><liclass="list__item">Contact</li><liclass="list__item">Item</li><liclass="list__item">Item2</li><liclass="list__item">Item3</li><liclass="list__item">Item4</li><liclass="list__item">Item5</li><liclass="list__item">Item6</li></ul></nav><divclass="container__hamburger"><iclass="fas fa-bars"></i></div></div><!-- FONT AWESOME --><scriptsrc="https://kit.fontawesome.com/96fadf0e69.js"crossorigin="anonymous"
        ></script><!-- FONT AWESOME --><scriptsrc="./index.js"></script></body></html>

Post a Comment for "Why Aren't All The Items In My Ul Displayed?"