问题描述:

I want to create an active class for my header menu I try delete padding top and bottom for all element in my header and nothing works.

Here is my code:

<header>

<nav class="navbar navbar-default">

<div class="container-fluid header-custom">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="index.html"><img alt="Climatherm" src="img/home.png"></a>

</div>

<p class="navbar-text pull-right hidden-xs hidden-sm">09 99 99 99 99</p>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li class="active"><span><a href="#">Plomberie Sanitaires</a></span></li>

<li class="active"><span><a href="#">Chauffage Climatisation</a></span></li>

<li class="active"><span><a href="#">nouvelles nergies</a></span></li>

<li class="active"><span><a href="#">dpannage maintenance</a></span></li>

<li class="active"><span><a href="#">Partenaires</a></span></li>

<li class="active"><span><a href="#">nous Contacter</a></span></li>

</ul>

</div>

</div>

</nav>

</header>

My css code

body{

font-family: 'Roboto', sans-serif;

max-width: 1200px;

margin-left:auto;

margin-right:auto;

}

.navbar-default {

background-color: #ed1c24;

border:none;

border-radius:0px;

}

.header-custom{

max-width:1000px;

padding-top:0px;

padding-bottom:0px;

}

.navbar-text{

font-size: 18px;

font-weight: 700;

color:#fff!important;

background-color:#d80109;

border-radius:18px;

padding:8px 20px 8px 30px;

margin-top:8px;

margin-bottom:auto;

}

.navbar-text::before{

content: url(../img/contact.png);

display:inline-block;

opacity: 1;

transform:translate(-13px, 4px);

}

.navbar-default .navbar-nav>li>span>a {

color: #fff;

font-size: 12px;

font-weight: 700;

text-transform: uppercase;

}

.navbar-nav{

padding: 0;

text-transform: uppercase;

}

.navbar-nav li {

display: inline-block;

list-style: none;

margin-left: 10px;

}

.navbar-nav li {

max-width: 110px;

line-height: 40px;

height: 40px;

background-color: #000;

}

.navbar-nav li span {

display: -moz-inline-box; /* FF2 or lower */

display: inline-block; /* FF3, Opera, Safari */

line-height: normal;

vertical-align: middle;

text-align: center;

}

.navbar-nav li span {

*display : inline; /* haslayout for IE6/7 */

}

and the result is:

results of my code

I want to make it like this:

Result expected

I tried to search for a solution in different forums and here but nothing works.

网友答案:

Is this solution feasible? fiddle example

I set the height of the buttons the same as the container (50px instead of 40px).

.navbar-nav li {
     max-width: 110px; 
     line-height: 50px;
     height: 50px;
     background-color: #000;
}
相关阅读:
Top