Здравствуйте. Подскажите пожалуйста такую вещь. Я создал меню через bootstrap
, прописал стили. Но когда я начал уменьшать размер меню, то он стал "съедать буквы". Нужно как-то поднять их. Спасибо.
.navbar-collapse {
background: linear-gradient(to top, #4c4e5a 0%, #2c2d33 100%);
border-radius: 5px;
}
.navbar-nav>li>a {
color: white;
}
.navbar-nav>li>a:hover {
color: #FF6600;
height: 36px
}
.navbar-nav>li {
border-right: 1px solid gray;
height: 100%;
}
.nav {
height:30px;
font-size: 18px;
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Zont-SPB</title>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div id="logo">
<a href="index.html">
<img src="logo1.png" alt="" />
</a>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div id="contacts">
<span style="font-size: 16px;" class="glyphicon glyphicon-envelope"></span>E-mail:
<p>
<span style="font-size: 16px"; class="glyphicon glyphicon-phone"></span>Телефон:
</p>
</div>
</div>
</div>
<div class="navbar ">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="#">Главная</a>
</li>
<li>
<a href="#">Демо-доступ</a>
</li>
<li>
<a href="catalog.html">Каталог</a>
</li>
<li>
<a href="contact.html">Контакты</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>