0

My codes are working fine on mobile view but on desktop right side Links are getting out of nav-bar. i am trying to create nav bar with Brand in center, search bar on left and links on right. and how to move hambuger bar on left and search on right side on mobile view .. (sorry for my english) 

.navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}
.navbar-toggle {
    z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">
        <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" href="#">Brand</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"><span class="glyphicon glyphicon-search" aria-hidden="true"> </span>
      </button>
    </div>
       <div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1">
     <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
     </form>
     </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-2">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
</nav>
NIraj Bhaskar
  • 11
  • 1
  • 4
  • just place the code for button search before hamburger in your html – Sahil Dhir May 03 '17 at 12:42
  • The question is not duplicate.. The subject of the question is.. The OP want something different of what actually has been asked @ZimSystem – Sahil Dhir May 03 '17 at 12:48
  • The question was changed, but the alignment issue is duplicate as well. Read the other answers and the solution works: https://www.codeply.com/go/fb9pU5evMu – Carol Skelly May 03 '17 at 12:57

2 Answers2

1

@media (max-width: 768px) {
 .nav_bar_align .navbar-brand{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
 }
 .nav_bar_align .nav_humber{
    float: left;
    margin-left: 15px;
    z-index: 1;
 }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="navbar navbar-default navbar-fixed-top nav_bar_align" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle nav_humber" data-toggle="collapse" data-target="#navbar-collapse-2">
        <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" href="#">Brand</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"><span class="glyphicon glyphicon-search" aria-hidden="true"> </span>
      </button>
    </div>
       <div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1">
     <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
     </form>
     </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-2">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
</nav>
Venkatachalam
  • 154
  • 6
0

add menu-1 class or call it whatever you want to the button

 <button type="button" class="navbar-toggle menu-1" data-toggle="collapse" data-target="#navbar-collapse-2">

then add this to your css:

.menu-1 {
float: left;
margin-left: 10px;
}

Update: to handle search issue remove width: 100 and increase left for .navbar-brand like this:

.navbar-brand {
    position: absolute;
    /*width: 100%;*/
    left: 50%;
    top: 0;
    text-align: center;
    margin: auto;
}

and add this css also:

@media (max-width:767px){
    a.navbar-brand {
        left: 45%;
  }
}

check the updated Jsfiddle

Mhd Alaa Alhaj
  • 2,438
  • 1
  • 11
  • 18