bootstrap navbar wrapping around phone - html

Question

I am using bootstrap 3.4.1 and I am having and issue with the navbar on phone (e.g. S9 )
The menu icon ends up going to new line. So I did col-xs-11 and col-xs-1 but still doesn't work. Here is the code:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="row">
<!-- THE MENU -->
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-11 col-xs-11">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Hammad Muhammad Mehmood</a>
</div>
<div id="main-menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Projects</li>
<li>Leetcode</li>
<li>About</li>
<li><span class="fa fa-github"></span>
</li>
</ul>
</div>
</div>
<!-- THE ICON -->
<div class="col-sm-1 col-xs-1">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<!-- <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>
</div>
</nav>
I have added this into my css so at least it shows in the new line , but it broke for other mobiles then. I don't know how to get it in the same line. Any help will be greatly appreciated:
.col-xs-1 {
width: 25%;
}

Answer 1

Firstly ditch the column constructs inside the bootstrap navbar. It was never intended for .row and .col- usage.
Because your .navbar-brand content is oversized for the S9 or any mobile device, it breaks the bootstrap mobile nav. Bootstrap 3 does not account for such oversized brand content. This is why flex is awesome in bootstrap 4.
Anyway with a few css tweeks (hacks) we can get the .navbar-brand content to break onto the next line, rather than the .navbar-toggle icon going to the next line.
See responsive example here... https://jsfiddle.net/joshmoto/k8c9uj7q/
.navbar-toggle {
position: absolute;
right: 0;
}
#media (max-width: 786px) {
.navbar-brand {
padding-right: 60px;
height: auto;
}
}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Hammad Muhammad Mehmood</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<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="main-menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Leetcode</li>
<li>About</li>
<li><span class="fa fa-github"></span>
</li>
</ul>
</div>
</div>
</nav>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>