witam mam problem z moim menu(pisanym w lessie)
kod:
*
{
margin:0;
padding:0;
}
.navbar
{
position:relative;
min-height:50px;
margin-bottom:20px;
background-color:gray;
}
.nav
{
margin-bottom:0;
padding-left:0;
list-style:none;
}
.nav>li
{
position:relative;
}
.nav>li>a
{
position:relative;
display:block;
padding:15px;
color:#fff;
text-decoration:none;
}
.nav>li>a:hover
{
background-color:olive
}
@media (min-width:768px)
{
.navbar-nav,.navbar-nav>li
{
float:left;
}
.navbar-nav>li>a
{
padding-top:15px;
padding-bottom:15px
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Siema</a></li>
<li><a href="#">Siema</a></li>
<li><a href="#">Siema</a></li>
<li><a href="#">Siema</a></li>
</ul>
</div>
</body>
</html>
efekt:
problem w tym że jak np nadam margin-top elementowi .navbar-nav, co prawda nadaje się górny margines ale szary pasek się nie rozszerza (element .navbar)
@media (min-width:768px)
{
.navbar-nav
{
padding-top: 20px;
}
.navbar-nav,.navbar-nav>li
{
float:left;
}
.navbar-nav>li>a
{
padding-top:15px;
padding-bottom:15px
}
}
efekt: