CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sidney Sousa
Sidney Sousa

Reputation: 3614

Aligning a navbar

I just created a a navbar and a hover feature.But the problems are now that when I hover on HOME,BEDROOMS and CONTACT US,the color has no effect entirely from top to bottom on the navbar...but on the others(Eg: FACILITIES SERVICES) the color has full effect.

HTML

<nav class="navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav" style="padding-top:10px">
        <li><span class="details"><strong>Phone</strong> </span><span           class="contacts">021 913 0643</span></li>
        <br/>
        <span class="details"><strong>Email</strong> </span> <a     class="contacts" href="#">[email protected] </a>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#"><span ></span>Home</a></li>
        <li><a href="#"><span ></span> FACILITIES<br/>
          SERVICES</a></li>
        <li><a href="#">BEDROOMS</a></li>
        <li><a href="#">RATEs <br/>
          & BOOKINGS</a></li>
        <li><a href="#">SURROUNDING<br/>
          ATTRACTIONS</a></li>
        <li><a href="#">CONTACT US</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS

.navbar{
    padding: 0 px;
    background: #331a00;
    padding-left:12px;
    padding-right: 12px;
    border: 0px;
}

.navbar ul.navbar-right li a{
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    padding-top: 30px;
    padding-bottom: 20px;
    margin:0;
    text-align: center;
}

.navbar ul.navbar-right li a:hover{
    background:#000000;
}

Check fiddle here

Upvotes: 5

Views: 108

Answers (2)

Sunil Gehlot
Sunil Gehlot

Reputation: 1589

I have to used min-height: 90px; to .navbar-nav.navbar-right li and display property for .navbar-nav.navbar-right li and .navbar-nav.navbar-right li a.

To make text vertically middle use below css.

Updated CSS

.navbar{
    background: #331a00;
}
.navbar ul li a{
    color: #ffffff !important;
    text-transform: uppercase;
 }
.navbar .navbar-default {
    background:none;
    border:0;
}

.navbar ul.navbar-right li a:hover{
    background:#000000;
}
@media (min-width: 768px){
  .navbar ul li a{
    text-align:center;
  }
  .navbar-nav.navbar-right li{
    display:table;
    min-height:90px;
  }
  .navbar-nav.navbar-right li a{
    display:table-cell;
    vertical-align: middle;
  }
}
@media (max-width: 767px){
  .navbar-nav.navbar-right li{
    display:table;
    width:100%;
    min-height:60px;
  }
  .navbar-collapse{
    max-height: inherit;
  }
  .navbar-nav.navbar-right li a{
    display:table-cell;
    vertical-align: middle;
  }
}

Check Updated Fiddle

Upvotes: 1

Sidney Sousa
Sidney Sousa

Reputation: 3614

Surely this CSS code works perfectly:

    @import  url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
   .navbar{
    background: #331a00;
    }
.navbar ul li a{
color: #ffffff !important;
text-transform: uppercase;
}
.navbar .navbar-default {
background:none;
border:0;
}

.navbar ul.navbar-right li a:hover{
background:#000000;
}
     @media (min-width: 768px){
    .navbar ul li a{
     text-align:center;
     }
    .navbar-nav.navbar-right li{
     display:table;
     min-height:90px;
    }
    .navbar-nav.navbar-right li a{
    display:table-cell;
    vertical-align: middle;
    }
    }
            @media (max-width: 767px){
   .navbar-nav.navbar-right li{
    display:table;
    width:100%;
    min-height:60px;
   }
   .navbar-collapse{
    max-height: inherit;
   }
   .navbar-nav.navbar-right li a{
    display:table-cell;
    vertical-align: middle;
   }
          }

Upvotes: 1

Related Questions