Why is my navbar not lining up when padding should do this?

userKn6l1 0
Viewed 33

Thanks all for the answers. As you can see below, I made the simple mistake of leaving the button content outside of the </a> closing tag. Cheers!

Below shows what my current navbar looks like.
The first number displays in the button area, where the ones after show beneath it.
[MyMenu][1] [1]: https://i.stack.imgur.com/a2dwT.png

<nav>
 <div id="navbar"><ul>
  <li><a href = "" class="noSelect" onclick="dummy(0); return false;">---1---</a></li>
  <li><a href = "events" class="noSelect"></a>---2---</li> <!--Upcoming Events, Join Clubs, Contact Us-->
  <li><a href = "clubs" class="noSelect"></a>---3---</li> 
  <li><a href = "contact" class="noSelect"></a>---4---</li>
 </ul></div>
</nav>

#navbar {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
}
#navbar ul {
    list-style-type: none;
}
#navbar ul li {
    display: inline;
    float: left;
}
#navbar ul li a {
    display: block;
    padding: 20px;
    text-decoration: none;
}
#navbar ul li a:hover {
    background-color: #B30003;
}

I believe the issue is with the padding!
Does it have something to do with the following line?

#navbar ul li a {

All help is appreciated. Thanks for your read!

css html
3 Answers

The HTML a tag is closed in the wrong place. Correct like this.

<nav>
  <div id="navbar">
    <ul>
      <li><a href="" class="noSelect">---1---</a></li>
      <li><a href="events" class="noSelect">---2---</a></li>
      <li><a href="clubs" class="noSelect">---3---</a></li>
      <li><a href="contact" class="noSelect">---4---</a></li>
    </ul>
  </div>
</nav>
Muhammad Karimi0

Try this:

#navbar {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
}
#navbar ul {
    list-style-type: none;
}
#navbar ul li {
    display: inline;
    float: left;
}
#navbar ul li a {
    display: block;
    padding: 20px;
    text-decoration: none;
}
#navbar ul li a:hover {
    background-color: #B30003;
}
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
   <nav>
    <div id="navbar">
     <ul>
      <li><a href = "" class="noSelect" onclick="dummy(0); return false;">---1---</a></li>
      <li><a href = "events" class="noSelect">---2---</a></li> <!--Upcoming Events, Join Clubs, Contact Us-->
      <li><a href = "clubs" class="noSelect">---3---</a></li> 
      <li><a href = "contact" class="noSelect">---4---</a></li>
     </ul>
    </div>
   </nav>
  </body>
</html>

Rizeen0

When i tried to copy your Html and css code, i fix the closing tag and the content of the A tag. when i run the code, it is fine. its the same answer like what Muhammad Karimi Answer.

<nav>
<div id="navbar">
  <ul>
    <li>
      <a href = "" class="noSelect" onclick="dummy(0); return false;">---1---</a> 
    </li>
    <li>
      <a href = "events" class="noSelect">---2---</a>
    </li>
    <li>
      <a href = "clubs" class="noSelect">---3---</a>
    </li> 
    <li>
      <a href = "contact" class="noSelect">---4---</a>
    </li>
  </ul>
</div>
Arnoud0
Related