CODEWITHSUNDEEP
htmlcss
badrijani
badrijani

Reputation: 127

when I set height to auto it doesnt work on li a

I want to set height of navbar to auto so when someone resizes it height to increase or decrease depends on screen or browser resize but it doesn't work i meant when i resize the ul li a goes down of navbar 

#navbar {
    width:100%;
    height:45px;
    background: black;
    box-shadow: 2px 5px rgb(252,227,0,.5);
    text-align: center;
    position: fixed;
    top:0;
    z-index: 100;
    float:top;
}
#navbar ul li {
    display: inline;
}

#navbar ul {
    margin-top:7px;
    display: inline-block;
    color:rgb(252,227,0);
    font-size:1.2rem;
    right:0;
    position: fixed;
}

#navbar ul li .a2,.a3,.a4 {
    padding-left:105px;
    cursor: pointer;
    color:rgb(252,227,0);
    font-size:1.2rem;
    text-decoration: none;
    transition: .5s;
}
<div id="navbar">
    <ul>
        <li><a href="#" class="a1"><i class="fas fa-bars"></i>Menu</a></li>
       <li><a href="#" class="a2"><i class="fas fa-shopping-cart"></i>Merchandise</a></li>
       <li><a href="#" class="a3"><i class="fas fa-info-circle"></i>About band</a></li>
       <li class="drop"><a href="#" class="a4"><i class="fas fa-music"></i>Listen now...</a></li>
   </ul>
   </div>

Upvotes: 1

Views: 47

Answers (2)

sglazkov
sglazkov

Reputation: 1066

#navbar {
  width: 100%;
  min-height: 45px;
  background: black;
  box-shadow: 2px 5px rgb(252, 227, 0, .5);
  text-align: center;
  position: fixed;
  top: 0;
  z-index: 100;
}

#navbar ul li {
  display: inline;
}

#navbar ul {
  display: block;
  margin-top: 7px;
  margin-bottom: 7px;
  color: rgb(252, 227, 0);
  font-size: 1.2rem;
}

#navbar ul li .a2,
#navbar ul li .a3,
#navbar ul li .a4 {
  display: inline-block;
  padding-left: 105px;
  cursor: pointer;
  color: rgb(252, 227, 0);
  font-size: 1.2rem;
  text-decoration: none;
  transition: .5s;
}
<div id="navbar">
  <ul>
    <li><a href="#" class="a1"><i class="fas fa-bars"></i>Menu</a></li>
    <li><a href="#" class="a2"><i class="fas fa-shopping-cart"></i>Merchandise</a></li>
    <li><a href="#" class="a3"><i class="fas fa-info-circle"></i>About band</a></li>
    <li class="drop"><a href="#" class="a4"><i class="fas fa-music"></i>Listen now...</a></li>
  </ul>
</div>

Upvotes: 0

Mak0619
Mak0619

Reputation: 660

Solution: -

If you want to set height of navbar auto...So you have to remove height and background from #navbar..

*#navbar {
    height:45px;
    background: black;
}*

- > Add Background and some padding on ul also set the width 100%.

#navbar ul{
    background: black;
    padding: 12px 10px;
    width: 100%;
}

Upvotes: 1

Related Questions