У меня есть navbar, который, когда я нажимаю на значок, перемещает содержимое ниже, и он работает отлично, но когда я хочу изменить CSS высоту, я сталкиваюсь с проблемой (выпадающий просто перекрывая текст h3 вместо перемещения вниз ).
Вот рабочая скрипка: -
с высотой (https://jsfiddle.net/kds8pe0L/6/) работает правильно
Высота Witouth (https://jsfiddle.net/hkeo7fg9/) Вот ошибка
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Import css file-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li><a href="/home">Clients</a></li>
<li><a href="/charts">Charts</a></li>
</ul>
@if (Sentinel::guest())
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
@endif
@if(!Sentinel::guest())
@if(Sentinel::inRole('admin'))
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Admin Panel <span class="caret"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="/adminsProfiles">Admins List</a></li>
<li><a href="/viewersProfiles">Users List</a></li>
</ul>
</li>
</ul>
@endif
@endif
@if(!Sentinel::guest())
@if(Sentinel::inRole('viewer'))
<ul class="nav navbar-nav">
<li> <a href="{{ route('profile', ['first_name' => Sentinel::getUser()->first_name]) }}">Profile</a></li>
</ul>
@endif
@endif
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@if (Sentinel::guest())
<li><a href="/login">Login</a></li>
<li><a href="/register">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{Sentinel::getUser()->first_name}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ URL::to('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ URL::to('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</div>
</div>
</nav>
<h2 class="text-center" >List of clients</h2>
<div class="container">
</div> <!-- /container -->
</body>
</html>
Css
body {
background-image: url("/images/images.jpg");
}
.container {
max-width: 940px;
}
#header{
height: 120px;
background-color: #007ab3;
padding: 20px;
padding-left: 100px;
}
.navbar {
position: relative;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 0;
}
.navbar-inverse{
background-color: #004666;
}
@media (min-width: 768px){
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
}}
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
}
.nav>li>a {
padding: 0px;
padding-left: 10px;
padding-right:10px;
color: white;
padding-top: 3px;
font-weight: 500;
font-size: 1.2em;
}
.navbar-inverse .navbar-nav>li>a {
color: white;
}
.tablica{
float:left;
}
td{
text-align: center;
width: 10%;
}
th{
font-size: 10px;
}
.table {
width: 90%;
}
.navbar-toggle {
position: relative;
float: right;
padding: 5px 5px;
margin-top: 2px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
background-color: #004666;
margin-right: -15px;
margin-left: -15px;
position: relative;
float: none;
}
th{
text-align: center;
}