CODEWITHSUNDEEP
htmlcss
Mohi Reza
Mohi Reza

Reputation: 31

I can't change the height or text-align in navbar items

I'm really new to this whole CSS and HTML and i'm trying to make a simple navbar with what I have learned. The problem is, I have the navbar items centered and I was happy with it. Then I decided to add this hover option so the background color of each item would change when hovering on it.

The issue is I cannot change the height or alignment of the boxes.

weird box

#header {
  background: #9842f5;
  position: fixed;
  width: 100%;
  padding: 20px 0;
  text-align: center;
}

nav ul {
  font-family: Arial;
  display: inline;
  text-align: center;
  margin: 0 20px;
}

nav ul:hover {
  background: blue;
  height: 20px important;
}

nav li {
  display: inline;
  opacity: 0.78;
  text-align: center;
}
<nav id="header">
  <ul>
    <li>Home</li>
  </ul>
  <ul>
    <li>Contact Info</li>
  </ul>
  <ul>
    <li>NUKE</li>
  </ul>
</nav>

Upvotes: 1

Views: 71

Answers (1)

Maryam
Maryam

Reputation: 146

The hover effect should be added to the list-items (<li>). To get more space, you can add padding instead of changing the height.

Also, only add one <ul> instead of 3.

#header {
  background: #9842f5;
  position: fixed;
  width: 100%;
  padding: 20px 0;
  text-align: center;
}
nav ul {
  font-family: Arial;
  display: inline;
  text-align: center;
  margin: 0 20px;
}
nav li:hover{
  background: blue;
  
}
nav li {
  display: inline;
  opacity: 0.78;
  text-align: center;
  padding: 20px;
}
<nav id="header">
  <ul>
    <li>Home</li>
    <li>Contact Info</li>
    <li>NUKE</li>
  </ul>
</nav>

Upvotes: 1

Related Questions