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

Question

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.)

Welcome on SO , i turned your codes into a snippet. feel free to update it and add any details needed to help you. — G-Cyrillus, May 06 '20 at 19:07
I tried on an iPhone X-sized screen and everything looks spaced normally... do you happen to have a screenshot? — Ashley, May 06 '20 at 19:10
It shows a little on a darker background (also on iPhone X, as per google developer tools), for example, on my bio and music pages where I'm changing the background images. I have a screenshot, I'll try to figure out where to add it. — DidiNYC, May 06 '20 at 21:08

turok87 · Accepted Answer · 2020-05-06T20:20:56.490

1

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.stack.imgur.com/v6Rhl.png

edited May 06 '20 at 20:20

answered May 06 '20 at 20:14

turok87

81
1
10

what type of phone is that, if I may ask you? I tested this site on device mockups on Google Developer's tools and the 38px actually got rid of the space on all phone devices. – DidiNYC May 06 '20 at 20:55
It was a simple responsive mode through Chrome developer tools. But as i see you already did changes and it's without spaces. – turok87 May 06 '20 at 21:00
There is only space between lists and hamburger button. I recommend you choose a more semantic tag for hamburger icon but in this case, giving two pixels to hamburger CSS padding-bottom will fix it. – turok87 May 06 '20 at 21:06
@DidiNYC and if my answer was helpful and works for you please accept as useful. – turok87 May 07 '20 at 08:54

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

1 Answers1