navbar not displaying properly in bootstrap on mobile devices - html

Question

I'm trying to build a navbar as shown in the image and I have also provided the code that I have used.
I'm happy with the view on a web interface however the view on a mobile device is completely messed. I have provided the screenshots from both the devices.
The logo is not even part of the navbar and I'm having trouble using the right side menu.
header.php
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-th"></span>
</a>
<ul class="dropdown-menu">
<li>Home</li>
<li role="separator" class="divider"></li>
<li>Admin</li>
<li>Holidays</li>
<li>Leave</li>
<li role="separator" class="divider"></li>
<li>Billing</li>
<li>Reports</li>
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
<a class="brand" style="margin: 0; float: none;" href="/home"><img src="http://www.chutti.work/assets/images/logo-final.png" width="130"/></a>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/user/profile/">
User Profile
<?php //echo $this->session->userdata['user_fname']." ".$this->session->userdata['user_lname']; ?>
</a>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-bell"></span>
<ul class="dropdown-menu">
<li><p class="text-muted" align="center">Notifications</p></li>
<li role="separator" class="divider"></li>
<li>Action</li>
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->

Answer 1

One way to do this is to place the left nav dropdown inside the navbar-header so it remains exposed at all times, then position it. You can also position the navbar logo in the center without having to place it inside the links.
See working example Snippet.
.navbar.navbar-custom {
background: white;
}
.navbar-custom .navbar-brand.navbar-brand-centered img {
position: absolute;
left: 50%;
display: block;
width: 130px;
text-align: center;
top: 0;
}
.navbar.navbar-custom > .container .navbar-brand.navbar-brand-centered img,
.navbar.navbar-custom > .container-fluid .navbar-brand.navbar-brand-centered img {
margin-left: -65px;
}
.navbar.navbar-custom .navbar-upper {
position: absolute;
left: 0px;
}
#media (max-width: 767px) {
.navbar.navbar-custom .navbar-upper {
top: -3px;
left: 15px;
background: none;
}
.navbar.navbar-custom .navbar-upper .dropdown-menu {
background: white;
margin-top: 6px;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-top: none;
border-radius: 0;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar.navbar-custom .navbar-upper .nav li.dropdown.open > .dropdown-toggle,
.navbar.navbar-custom .navbar-upper .nav li.dropdown.active > .dropdown-toggle,
.navbar.navbar-custom .navbar-upper .nav li.dropdown.open.active > .dropdown-toggle {
background: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top navbar-custom">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand navbar-brand-centered" href="/home">
<img src="http://www.chutti.work/assets/images/logo-final.png" />
</a>
<div class="navbar-upper">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-th"></span>
</a>
<ul class="dropdown-menu">
<li>Home
</li>
<li role="separator" class="divider"></li>
<li>Admin
</li>
<li>Holidays
</li>
<li>Leave
</li>
<li role="separator" class="divider"></li>
<li>Billing
</li>
<li>Reports
</li>
<li role="separator" class="divider"></li>
<li>Logout
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li> Profile
</li>
<li class="dropdown"> <span class="glyphicon glyphicon-bell"></span>
<ul class="dropdown-menu">
<li>
<p class="text-muted" align="center">Notifications</p>
</li>
<li role="separator" class="divider"></li>
<li>Action
</li>
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="well">Welllll</div>
</div>