Rather hard to describe the problem. So just look at this jsFiddle:
http://jsfiddle.net/arodrig0/xfs257hp/2/
When the header becomes smaller navbar jumps below the image logo. I would like to make a container not bigger than 970px width and the menu or logo becomes a bit smaller or/and the logo before the toggle icon appears.
Where is the problem?
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="./css/bootstrap.css" media="screen" rel="Stylesheet" type="text/css" />
<link href="./css/style_new.css" media="screen" rel="Stylesheet" type="text/css" />
<body>
<header class='container' role='navigation'>
<div class='navbar navbar-header'>
<a class="navbar-brand" id="logo" href="/">
<img alt="Brand" src="/layout/images/logo_new.gif" height="74px" width="237px">
</a>
<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 id="containerNav">
<ul id="test"class='nav navbar-nav navbar-left collapse navbar-collapse'>
<li class="dropdown">
<a href='#' data-target='#' class='dropdown-toggle' data-toggle='dropdown'data-hover="dropdown">sample<br><span>sample</span></a>
<ul class='dropdown-menu' role='menu'>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li class="bottom"></li>
</ul>
</li>
<li><a href='#' data-target='#' class='dropdown-toggle' data-toggle='dropdown'data-hover="dropdown">sample<br><span>sample</span></a></li>
<li class="dropdown">
<a href="#1" data-target='#' class='dropdown-toggle' data-toggle='dropdown'data-hover="dropdown">samples<br><span>samples</span></a>
<ul class='dropdown-menu' role='menu'>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-target='#' class='dropdown-toggle' data-toggle='dropdown'data-hover="dropdown">sample<br><span>sample</span></a>
<ul class='dropdown-menu' role='menu'>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
</ul>
</li>
<li>
<a href="#">sample<br><span>sample</span></a>
</li>
<li class="dropdown">
<a href="#" data-target='#' class='dropdown-toggle' data-toggle='dropdown'data-hover="dropdown">sample<br><span>sample</span></a>
<ul class='dropdown-menu' role='menu'>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
</ul>
</li>
</ul>
</div>
</header>
<div id="carousel" class="row">
</div>
</div> <!-- End Main Container-->
</body>
Your nav menu width is too long. Therefore, when the screen gets smaller, it do not have enough space to squeeze together with the logo on the same line. Try adding a div with the column class "col-sm-4 col-md-3" and "col-sm-8 col-md-9" to wrap the nav header and containerNav. http://jsfiddle.net/gnauLypt/1/
<div class="col-sm-4 col-md-3">
<div class="navbar navbar-header">
...
</div>
</div>
<div class="col-sm-8 col-md-9">
<div id="containerNav">
...
</div>
</div>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments