Bootstrap navbar overlaps logo? - css

Question

FRONT END FOR NAVBAR
<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">
<div class="navbar-header">
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />
</a>
</div>
<div class="collapse navbar-collapse" id=".navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<h4>CATEGORY<b class="caret"></b></h4>
</a>
<ui>...........</ui>
</li>
<li>
<a href="#">
<h4>SHIRT</h4>
</a>
</li>
<li>
<a href="#">
<h4>PANTS</h4>
</a>
</li>
<li>
<a href="#">
<h4>SHOE</h4>
</a>
</li>
<li>
<a href="#">
<h4>FASHION</h4>
</a>
</li>
<li>
<a href="#">
<h4>PAPER QULING</h4>
</a>
</li>
<li>
<a href="#">
<h4>TERRACOTA</h4>
</a>
</li>
<li>
<a href="#">
<h4>MEENAKARI</h4>
</a>
</li>
<li>
<a href="#">
<h4>TRADITIONAL</h4>
</a>
</li>
<li>
<a></a>
</li>
</ul>
</ul>
</div>
<br />
</nav>
When i decrease size of google chrome the category and other stuff overlaps logo at width:1502px
I have tried this css
#media (max-width:1502px){
.navbar-brand {
height: 80px;
}
.navbar {
background-color: #ccc;
}
.navbar-toggle {
margin-top: 25px;
}
}
IMAGE : IMAGE OF NAVBAR

Answer 1

Because you have so many links inside your nav and due to the increased font size it's overflowing since there simply is not enough space the smaller the viewport gets.
You can change the breakpoint that the navbar collapses, additionally you can change the display property of the links so they wrap. This will leave them exposed longer but you'll still need to collapse the nav earlier then normal.
Example I:
.navbar.navbar-tall {
background-color: white;
}
.navbar.navbar-tall .navbar-nav > li > a {
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
}
.navbar.navbar-tall .navbar-brand {
padding-top: 5px;
}
.navbar.navbar-tall .navbar-brand img {
height: 90px;
}
#media (min-width: 1505px) {
.navbar.navbar-tall .navbar-nav > li > a {
line-height: 70px;
}
}
/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/
#media (max-width: 1504px) and (min-width: 768px) {
.navbar.navbar-fixed-bottom .navbar-collapse,
.navbar.navbar-fixed-top .navbar-collapse {
max-height: auto;
overflow-x: visible;
}
}
#media (max-width: 1504px) {
.navbar .navbar-header {
float: none;
min-height: 100px;
}
.navbar .navbar-left,
.navbar .navbar-right {
float: none !important;
}
.navbar .navbar-right {
margin-right: 0px;
}
.navbar .navbar-right~.navbar-right {
margin-right: 0;
}
.navbar .navbar-toggle {
display: block;
margin-top: 32.5px;
}
.navbar .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar .navbar-collapse.collapse {
display: none!important;
overflow: visible!important;
}
.navbar .navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar .navbar-nav>li {
float: none;
}
.navbar .navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar .collapse.in {
display: block !important;
overflow-y: auto;
}
.navbar .navbar-nav .dropdown-menu > li > a,
.navbar .navbar-nav .dropdown-menu > li > a:hover,
.navbar .navbar-nav .dropdown-menu > li > a:focus {
color: #777;
}
.navbar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-tall" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">
</a>
</div>
<div class="collapse navbar-collapse" id=".navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
CATEGORY <span class="caret"></span>
<ul class="dropdown-menu">
<li>LINK
</li>
</ul>
</li>
<li>
SHIRT
</li>
<li>
PANTS
</li>
<li>
SHOE
</li>
<li>
FASHION
</li>
<li>
PAPER QULING
</li>
<li>
TERRACOTA
</li>
<li>
MEENAKARI
</li>
<li>
TRADITIONAL
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Example II: Wrapped Links
.navbar.navbar-tall {
background-color: white;
}
.navbar.navbar-tall .navbar-nav > li > a {
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
}
.navbar.navbar-tall .navbar-brand {
padding-top: 5px;
}
.navbar.navbar-tall .navbar-brand img {
height: 90px;
}
#media (min-width: 1500px) {
.navbar.navbar-tall .navbar-nav > li > a {
line-height: 70px;
}
}
#media (max-width: 1499px) and (min-width: 1000px) {
.navbar.navbar-tall .navbar-nav {
display: table;
float: none;
}
.navbar.navbar-tall .navbar-nav > li {
display: table-cell;
}
}
/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/
#media (max-width: 1499px) and (min-width: 1000px) {
.navbar.navbar-fixed-bottom .navbar-collapse,
.navbar.navbar-fixed-top .navbar-collapse {
max-height: auto;
overflow-x: visible;
}
}
#media (max-width: 999px) {
.navbar .navbar-header {
float: none;
min-height: 100px;
}
.navbar .navbar-left,
.navbar .navbar-right {
float: none !important;
}
.navbar .navbar-right {
margin-right: 0px;
}
.navbar .navbar-right~.navbar-right {
margin-right: 0;
}
.navbar .navbar-toggle {
display: block;
margin-top: 32.5px;
}
.navbar .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar .navbar-collapse.collapse {
display: none!important;
overflow: visible!important;
}
.navbar .navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar .navbar-nav>li {
float: none;
}
.navbar .navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar .collapse.in {
display: block !important;
overflow-y: auto;
}
.navbar .navbar-nav .dropdown-menu > li > a,
.navbar .navbar-nav .dropdown-menu > li > a:hover,
.navbar .navbar-nav .dropdown-menu > li > a:focus {
color: #777;
}
.navbar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-tall" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">
</a>
</div>
<div class="collapse navbar-collapse" id=".navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
CATEGORY <span class="caret"></span>
<ul class="dropdown-menu">
<li>LINK
</li>
</ul>
</li>
<li>
SHIRT
</li>
<li>
PANTS
</li>
<li>
SHOE
</li>
<li>
FASHION
</li>
<li>
PAPER QULING
</li>
<li>
TERRACOTA
</li>
<li>
MEENAKARI
</li>
<li>
TRADITIONAL
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

Maybe this is what you are looking for:
.navbar-brand {
padding: 0px !important;
}
.navbar-brand > img {
height: 100%;
width: auto;
}
#media (min-width:768px) {
.navbar-brand {
padding: 15px 0px 0px 0px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<!--start - only for test pupose-->
<img alt="Brand" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTAUTCWRBOD3bLFlPjl_MsOm3-E8X0P3prqoSNRr6B_jJluRyiy" class="img img-responsive logo">
<!--start - only for test pupose-->
<asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />
</a>
</div>
<div class="navbar-collapse collapse" id=".navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<h4>CATEGORY<b class="caret"></b></h4>
</a>
</li>
<li>
<a href="#">
<h4>SHIRT</h4>
</a>
</li>
<li>
<a href="#">
<h4>PANTS</h4>
</a>
</li>
<li>
<a href="#">
<h4>SHOE</h4>
</a>
</li>
<li>
<a href="#">
<h4>FASHION</h4>
</a>
</li>
<li>
<a href="#">
<h4>PAPER QULING</h4>
</a>
</li>
<li>
<a href="#">
<h4>TERRACOTA</h4>
</a>
</li>
<li>
<a href="#">
<h4>MEENAKARI</h4>
</a>
</li>
<li>
<a href="#">
<h4>TRADITIONAL</h4>
</a>
</li>
<li><a></a></li>
</ul>
</div>
</div>
</nav>