CODEWITHSUNDEEP
htmlcssnav
Jyclop
Jyclop

Reputation: 499

Items in nav shift apart slightly when clicked

I have a nav element with 4 items. When I click on any of the elements, I notice that the items shift apart slightly, and the div expands.

<div id="siteNavigation" class="navDiv">
  <nav>
    <ul>
      <li><span><a href="index.html" class="selected">Home</a></span></li>
      <li><a href="resources\waiting_room.jpg">Meet Me</a></li>
      <li><a href="resources\waiting_room.jpg">About</a></li>
      <li><a href="resources\waiting_room.jpg">Contact</a></li>
    </ul>
  </nav>
</div>


.navDiv {
  display: inline;
  width: auto;
  float: right;
  border: solid;
}

nav ul {
  clear: both;
  list-style-position: inside;
  clear: left;
  list-style: none;
  margin-left: 0;
  width: auto;
  padding-top: 32px;
  text-align: center;
  white-space: nowrap;
}

nav ul li {
  display: inline-block;
  white-space: nowrap;
  padding-left: 8px;
  border: none;
}

nav ul li a {
  color: #000000;
  /* #E3CF9C */
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 0.05em;
  padding: 10px 3.125% 26px 3.125%;
  text-transform: uppercase;
  border: none;
}

nav ul li a:hover {
  color: #BF0000;
}

nav ul li a.selected {
  color: #BF0000;
}

nav ul li a.selected:hover {
  color: #E3CF9C;
}

JSFiddle example: https://jsfiddle.net/rfhasw48/1/

What do I need to change to make the nav stay a constant size?

Upvotes: 1

Views: 46

Answers (1)

Cristophs0n
Cristophs0n

Reputation: 1266

Just remove the padding from nav ul li a.

Updated CSS:

    .navDiv {
  display: inline;
  width: auto;
  float: right;
  border: solid;
}

nav ul {
  clear: both;
  list-style-position: inside;
  clear: left;
  list-style: none;
  margin-left: 0;
  width: auto;
  padding-top: 32px;
  text-align: center;
  white-space: nowrap;
}

nav ul li {
  display: inline-block;
  white-space: nowrap;
  padding-left: 8px;
  border: none;
}

nav ul li a {
  color: #000000;
  /* #E3CF9C */
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
}

nav ul li a:hover {
  color: #BF0000;
}

nav ul li a.selected {
  color: #BF0000;
}

nav ul li a.selected:hover {
  color: #E3CF9C;
}

Upvotes: 1

Related Questions