Search code examples
htmlcssresponsive-design

Li will not stack above each other on mobile

So I am creating a mobile version of my app, and the tricky part about this mobile is the responsiveness. I'll post a picture of what I want and a picture of what I am getting.

What I want:

What I want

What I am getting: What I am getting

As you can see, this is the ul The Ul

As you can see, these are the lis (they're all in the same place) The Lis

I'll show you my code, and hopefully someone can tell me what is going on.

HTML:

<body>
<header class="header">
  <nav class="navigation">
    <div class="logo">
      <img src="Images/logo.svg">
    </div>
    <ul class="nav-items">
      <li class="nav-items nav-li"><a href=#>Home</a></li>
      <li class="nav-items nav-li"><a href=#>About</a></li>
      <li class="nav-items nav-li"><a href=#>Contact</a></li>
      <li class="nav-items nav-li"><a href=#>Blog</a></li>
      <li class="nav-items nav-li"><a href=#>Careers</a></li>
    </ul>
    <a id="invite" class="btn-nav" href="#">
      <button class="btn">Request Invite</button>
    </a>
  </nav>
</header>
<!-- I have other code below that I don't think is important. -->
</body>

CSS: (What I think is important)

body {
    width: 100%;
    height: 100%;
    position: relative;
    height: 100vh;
    width: 100vw;
}
.mobileNav {
    position: absolute;
    color: rgb(150, 152, 166, 0.85);
    bottom: -5rem;
    left: 0%;
    display: block;
    width: 100%;
    min-height: 100%
}
.nav-items-mobile {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}
.nav-li {
    padding: 0 1rem 0 1rem;
    height: 100%;
    cursor: pointer;
}

I do have JS code, but I believe it's not needed because these are just CSS classes. I believe if I can just stack the lis properly, then the problem will be solved.

Thank you

Solution

  • Your position property doesn't make sense in this context.

    From mdn web docs

    absolute

    The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its closest containing block. Its final position is determined by the values of top, right, bottom, and left.

    This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

    So your li elements stack on top of each other because they are positioned with respect to the parent element, ignoring the elements before and after.

    You might also want to reconsider your min-height property. Setting it to 100% means that your <li> will have height at least as high as the parent element, which doesn't make sense since you have multiple <li>. Same goes for your height property.

    Here's your page without these properties: Image showing webpage with intended look