Search code examples
htmlcsshtml-listsnav

Can't Find a Way to Remove the Whitespace/ Border Around My List Items


My navbar becomes a dropdown menu for mobile devices. It's a CSS menu, However, the dropdown items have a sort of white space or border around them.

I tried all options listed here: How to remove the space between list items Unfortunately, these solutions didn't work for me. I also took the menu apart and could remedy some of the borders by moving #navigation a's margin-top to 0, reducing the opacity of background by 0.05, and by setting the height of the list item to 38px. Still, the "border" remains an eyesore on some devices, incl iPhone X.

This site is a site for my own music project, so I put it live, in case that helps: http://mynameisdidi.com/

@media screen and (max-width: 695px) {
  .hamburger {
    display: none;
  }
  .hamburger.showClass {
    display: block;
    position: fixed;
  }
  nav {
    position: relative;
    z-index: 500;
  }
  ul {
    float: right;
    width: 100%;
    transition: .45s ease-in;
    margin-top: -25px;
  }
  li {
    width: 95%;
    height: 38px;
  }
  #navigation a {
    display: block;
    width: 58.5%;
    margin-right: 1px;
    margin-top: 0;
    float: right;
    background-color: rgba(255, 255, 255, 0.75);
    color: #b406c7;
    /*magenta*/
    text-align: center;
    padding: 6px;
    font-size: 19px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
  }
}
<div class="hamburgerIcon" onclick="toggleClass()">
  <h2>&#9776;</h2>
</div>

<nav id="navigation">
  <ul class="hamburger">
    <li><a href="index.html">Home</a></li>
    <li><a href="music.html">Music</a></li>
    <li><a href="bio.html">Bio</a></li>
    <li><a href="booking.html">Booking</a></li>
  </ul>
</nav>

Sorry if this post doesn't meet the posting criteria, my first post here. (Just let me know for the future. Thank you.)


Solution

  • If you mean spaces between li elements it causesheight: 38px;. Change it (remove) and it will be without spacing.

    ![how i see li spaces][1] https://i.sstatic.net/v6Rhl.png