CODEWITHSUNDEEP
csstwitter-bootstrap-3
esteemed.squire
esteemed.squire

Reputation: 524

Bootstrap 3 - What is causing the search form from staying in-line?

I'm trying to keep my search form in-line with the other navbar elements, the weird thing is when initially going to the page it's on 2 lines, yet when I refresh it's in-line. How do I keep this in-line?

I've tried adding the following:

.navbar-right{
    float: right;
    margin-top: 10px;
}

which sadly did not work, the search form still goes to 2 lines when first going to the URL, upon refreshing the page it goes in-line as intended. PLEASE HELP!!!

enter image description here

<div class="blog-masthead">
<div class="container">        
    <nav class="blog-nav">
        <a class="blog-nav-item" href="{{ path('general_sym_project_homepage') }}">Home</a>
        <a class="blog-nav-item" href="#">New features</a>
        <a class="blog-nav-item" href="http://www.stackoverflow.com">Stack Overflow</a>
        <a class="blog-nav-item" href="http://www.symfony.com">Resources</a>
        <a class="blog-nav-item" href="{{ path('general_sym_project_about') }}">About</a>

        <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
        </form>

    </nav>
</div>
</div>

.blog-nav-item {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}

/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right:  5px solid transparent;
border-bottom: 5px solid;
border-left:   5px solid transparent;
}

Upvotes: 1

Views: 498

Answers (1)

davidpauljunior
davidpauljunior

Reputation: 8338

When Bootstrap create a navbar they wrap the list items in a <ul> and float that left which causes it to line up correctly.

So if you put your links into a list and use Bootstrap's classes then you'll have everything lined up.

<nav class="blog-nav">
  <ul class="nav navbar-nav">
    <li><a class="blog-nav-item" href="{{ path('general_sym_project_homepage') }}">Home</a></li>
    <li><a class="blog-nav-item" href="#">New features</a></li>
    <li><a class="blog-nav-item" href="http://www.stackoverflow.com">Stack Overflow</a></li>
    <li><a class="blog-nav-item" href="http://www.symfony.com">Resources</a></li>
    <li><a class="blog-nav-item" href="{{ path('general_sym_project_about') }}">About</a></li>
  </ul>
  <form class="navbar-form navbar-right">
    <input type="text" class="form-control" placeholder="Search...">
  </form>
</nav>

Demo

If you don't want Bootstraps styles on the nav items, then remove the nav and navbar classes from the <ul> and add this to the CSS:

.blog-nav > ul {
  list-style: none;
  float: left;
}
.blog-nav > ul > li {
  float: left;
}

Demo

Upvotes: 2

Related Questions