Bootstrap 3 navbar alignment issue

Question

I just started using Bootstrap today and I'm having this alignment issue with the navbar. The links move to the next line on desktop:

Here's a working demo: http://jsfiddle.net/b5mbbwgb

The code:

 <div class = "navbar navbar-inverse navbar-static-top">
           <div class = "container">
             <div class="navbar-header">
                   <button class = "navbar-toggle pull-left" data-toggle = "collapse" data-target = "#nav-header-links-collapse">
                           <span class = "icon-bar"></span>
                           <span class = "icon-bar"></span>
                           <span class = "icon-bar"></span>
                   </button>
                   <a class="navbar-brand navbar-brand-centered" href="#" data-toggle = "collapse" data-target = "#nav-header-logo-collapse">
                    <img alt="logo" width="164" height="30" src="http://placehold.it/164x30?text=LOGO">
                </a>
                <a class = "navbar-toggle pull-right glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse">

                   </a>

                </div>
                    <div class = "collapse navbar-collapse" id="nav-header-search-collapse">
                        <form class="nav navbar-form" role="search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search" name="q">
                                <div class="input-group-btn">
                                    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                                </div>
                            </div>
                        </form>
                </div>

                   <div class = "collapse navbar-collapse" id="nav-header-links-collapse">
                          <ul class = "nav navbar-nav navbar-right">
                                  <li class = "active"><a href = "#">Home</a></li>
                                  <li><a href = "#">Social</a></li>
                                  <li><a href = "#">Contact</a></li>                             
                                  <li><a href = "#">About</a></li>
                          </ul>
                   </div>
           </div>
   </div>

After numerous attempts I'm not able to fix these issues:

Links move to the next line
Search input has lines on top & bottom on mobile. See screenshot below

Can someone give me a hint on what needs to be done to fix these 2 issues? I'm learning, so I'd appreciate a basic explanation too. Thanks!

LiranBo · Accepted Answer · 2015-10-29 12:06:59Z

3

JSFIddle

Is this what you meant?

<div class = "navbar navbar-inverse navbar-static-top">
    <div class = "container">
        <div class="navbar-header">
            <button class = "navbar-toggle pull-left" data-toggle = "collapse" data-target = "#nav-header-links-collapse">
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
            </button>
            <a class="navbar-brand navbar-brand-centered" href="#" data-toggle = "collapse" data-target = "#nav-header-logo-collapse">
                <img alt="logo" width="164" height="30" src="http://placehold.it/164x30?text=LOGO">
                    </a>
                <a class = "navbar-toggle pull-right glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse">

                </a>

                </div>
            <div class = "nav navbar-nav collapse navbar-collapse" id="nav-header-search-collapse">
                <form class="nav navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="q">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                            </div>
                            </div>
                        </form>
                    </div>

                <div class = "collapse navbar-collapse nav navbar-nav navbar-right" id="nav-header-links-collapse">
                    <ul class = "nav navbar-nav navbar-right">
                        <li class = "active"><a href = "#">Home</a></li>
                        <li><a href = "#">Social</a></li>
                        <li><a href = "#">Contact</a></li>                             
                        <li><a href = "#">About</a></li>
                    </ul>
                </div>
            </div>
        </div>

If you look in firebug u'd see that nav-header-search-collaps and nav-header-links-collapse their divs width overlap. so this is what I changed:

<div class = "nav navbar-nav collapse navbar-collapse" id="nav-header-search-collapse">

<div class = "collapse navbar-collapse nav navbar-nav navbar-right" id="nav-header-links-collapse">

Or maybe this:

Option2

<div class = "navbar navbar-inverse navbar-static-top">
    <div class = "container">
        <div class="navbar-header">
            <button class = "navbar-toggle pull-left" data-toggle = "collapse" data-target = "#nav-header-links-collapse">
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
            </button>
            <a class="navbar-brand navbar-brand-centered" href="#" data-toggle = "collapse" data-target = "#nav-header-logo-collapse">
                <img alt="logo" width="164" height="30" src="http://placehold.it/164x30?text=LOGO">
                    </a>
                <a class = "navbar-toggle pull-right glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse">

                </a>

                </div>
            <div class = "nav navbar-nav collapse navbar-collapse" id="nav-header-search-collapse">
                <form class="nav navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="q">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                            </div>
                            </div>
                        </form>
                    </div>

                <div class = "collapse navbar-collapse nav navbar-nav navbar-right" id="nav-header-links-collapse">
                    <ul class = "nav navbar-nav navbar-right">
                        <li class = "active"><a href = "#">Home</a></li>
                        <li><a href = "#">Social</a></li>
                        <li><a href = "#">Contact</a></li>                             
                        <li><a href = "#">About</a></li>
                    </ul>
                </div>
            </div>
        </div>

edited Oct 29, 2015 at 12:06

answered Oct 29, 2015 at 11:52

LiranBo

2,1662 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Yeti Over a year ago

Yep, this exactly. But I have no clue what changes you made :D. Edit: The lines on top/bottom of the search on mobile still persists though.

LiranBo Over a year ago

@Yeti, can you provide a screenshot?

Yeti Over a year ago

It's in the original post, at the bottom.

LiranBo Over a year ago

what would you like to see instead?

LiranBo Over a year ago

That's because of the navbar-nav I've added to nav-header-search-collapse. it overrides the margin left\right of -15px and sets it to 0px. This is something you can fix locally in case you want.

|

Fayyaz Naqvi · Accepted Answer · 2015-10-29 11:53:08Z

1

If you add pull-left class to #nav-header-search-collapse, it would set a width to that div.

<div class="collapse navbar-collapse pull-left" id="nav-header-search-collapse">

answered Oct 29, 2015 at 11:53

Fayyaz Naqvi

7658 silver badges19 bronze badges

1 Comment

Yeti Over a year ago

This works but the gap between the logo and searchbox has doubled!

vanburen · Accepted Answer · 2015-10-29 16:37:29Z

This example should at least give you some thing to work with.

1) As far as the borders go, you have to remove the box-shadow and the border

2) The placement of your search bar is trickier. It's probably best to use a different class for your navbar-toggle so they don't conflict and the rest is really just provisioning space for it inside the navbar. It may be better to just create your own classes for things like this so you aren't working around or fighting with predifined rules.

See example Snippet.

.navbar.navbar-custom .navbar-brand {
  padding-top: 10px;
  padding-bottom: 10px;
}
.navbar.navbar-custom .search-toggle {
  right: 15px;
  top: 17.5px;
  cursor: pointer;
  text-decoration: none;
  color: white;
  display: none;
}
@media screen and (min-width: 768px) {
  .navbar.navbar-custom .navbar-form {
    top: -42px;
    left: 165px;
    position: relative;
    height: 35px;
  }
}
@media screen and (max-width: 767px) {
  .navbar.navbar-custom .navbar-brand-centered {
    display: inline-block;
    left: 0;
    right: 0;
    margin: 0;
    padding-left: 0;
    float: none;
  }
  .navbar.navbar-custom .navbar-header {
    text-align: center;
  }
  .navbar.navbar-custom .search-toggle {
    display: inline;
  }
  .navbar.navbar-custom .navbar-collapse,
  .navbar.navbar-custom .navbar-form {
    border: none;
    box-shadow: none;
  }
  .navbar.navbar-custom .navbar-toggle {
    margin-right: -15px;
    left: 10px;
  }
}

<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" />
<div class="navbar navbar-inverse navbar-static-top navbar-custom">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle pull-left" data-toggle="collapse" data-target="#nav-bs"> <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a class="navbar-brand navbar-brand-centered" href="#" data-toggle="collapse" data-target="#nav-logo">
        <img alt="logo" width="164" height="30" src="http://placehold.it/164x30?text=LOGO">
      </a>

      <a class="search-toggle pull-right glyphicon glyphicon-search" data-toggle="collapse" data-target="#nav-search"></a>

      <div class="collapse navbar-collapse" id="nav-search">
        <form class="nav navbar-form" role="search">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="q">
            <div class="input-group-btn">
              <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>

              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="collapse navbar-collapse" id="nav-bs">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a>

        </li>
        <li><a href="#">Social</a>

        </li>
        <li><a href="#">Contact</a>

        </li>
        <li><a href="#">About</a>

        </li>
      </ul>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Bootstrap 3 navbar alignment issue

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related