Wyrównanie paska nawigacyjnego

Question

Właśnie utworzyłem pasek nawigacyjny i funkcję aktywowania.Jednak problem polega na tym, że po najechaniu na DOM, SYPIALNIE i KONTAKT z NAMI kolor nie ma żadnego efektu od góry do dołu na pasku nawigacyjnym ... ale na innych (np. USŁUGI OBIEKTU) kolor ma pełny efekt.

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="#">info@acaciahouse.co.za </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; 
} 

Sprawdź fiddle here

Answer 1

muszę stosować min-height: 90px; do .navbar-nav.navbar-right li i display nieruchomość za .navbar-nav.navbar-right li i .navbar-nav.navbar-right li a.

Aby tekst był w pionie w środku, użyj poniżej 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; 
    } 
} 

Sprawdź Updated Fiddle

Answer 2

pewnością ten kod CSS działa perfekcyjnie:

@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; 
    } 
      }