Geek Answers Handbook

Aligning the navigation bar

I just created aa navbar and hover function. But the problems now are that when I am on HOME, BEDROOMS and CONTACT US, the color has no effect completely from top to bottom on the navigation bar ... but on others (For example: SERVICES) the color has a 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="#"> 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; }

Mark the fiddle here

+5
source share
2 answers

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

To make the text vertically average use below css.

CSS updated

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

Tick Updated Script

+5
source

Of course, this CSS code works fine:

  @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; } }
+1
source

More articles:


All Articles