CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
dw19
dw19

Reputation: 73

Vertical align and line height not working

I am developing a website, I started without bootstrap and made a simple navigation bar, there I used line height and vertical align like this: 

.navigation {
padding:0;
margin:0;
background:#efefef;
position:fixed;
list-style:none;
box-shadow: 0 2px 5px 0 lighten(#000, 55%) ;
top:0;
z-index:998;
width:100%;
text-align:center;
font-size:12px;
font-family: 'Montserrat', sans-serif;
li {
    display:inline-block;
    vertical-align:middle;
    line-height:15px;
    padding: 15px 25px;
    a{
        display:inline-block;
        color:#6d6d6d;
        text-decoration:none;
        &:hover{
            color: lighten(#6d6d6d, 20%);
        }
    } 
}

Now after using bootstrap its not working anymore, here is the markup after bootstrap:

<div id="custom-navbar" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-brand">
            <img src="imgs/logo.png">
        </div>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        MENU
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul id="custom-navbar-ul" class="nav navbar-nav navbar-right">
                <li><a href="#">HOME</a></li>
                <li><a href="#">BENEFITS</a></li>
                <li><a href="#">APPS<br>WIDGET</a></li>
                <li><a href="#">PLACEMENT<br>GUIDE</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><button type="button" id="sign-up" class="btn btn-sm"><a href="#">SIGN UP</a></button></li>
                <li><button type="button" id="sign-in" class="btn btn-sm"><a href="#">SIGN IN</a></button></li>
            </ul>
        </div>
    </div>

</div>

And the markup:

#custom-navbar{
height:80px;
background:#efefef;
box-shadow: 0 2px 5px 0 lighten(#000, 55%) ;
z-index:9999;}

#custom-navbar-ul{
text-align:center;
font-size:12px;
li{
    display:block;
    vertical-align:middle;
    line-height:15px;
    padding:.7% 8px;
}}

I saw several answers where it asked to used tables, and I did, but still no effect, what might be the problem?

Upvotes: 0

Views: 1108

Answers (1)

Telford Computer-DoctorLtd
Telford Computer-DoctorLtd

Reputation: 164

Try styling it like: 

#custom-navbar-ul {
  text-align:center;
  font-size:12px;
}
#custom-navbar-ul li {
  display:block;
  vertical-align:middle;
  line-height:15px;
  padding:.7% 8px;
}

Upvotes: 1

Related Questions