Bootstrap CSS - How do I keep the search form inline with other navbar elements?


Tags: css,twitter-bootstrap

Problem :

New to CSS, I'm trying to keep my search form in-line with the other navbar elements, and 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?

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;
}


Solution :

I think you can create a rule for navbar-right. Just add these css;

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

    CSS Howto..

    How to create a set of css rules for safari

    How to make the background DIV only transparent using CSS

    How to make a background with 45 degree lines with css?

    How can clients without Ruby view web pages using SASS?

    How to make a box expand a distance from the sides

    How can I make a pointy arrow with a div in CSS

    How to actually center (vertical and horizontal) text inside a nested div

    How to remove default document style from an element using Javascript

    jQuery glowing animations : how to improve?

    How to inherit photo when hover on links under navigation bar?

    How can I make my wrapper
    vertically centered and responsive?

    How to make images stay on one long line?

    How to make a circular image in css

    Dropdown list doesn't show up, what am i doing wrong

    How to deal with collapsing margins on html & body?

    CSS how to style the “content”/“background” attribute of a custom checkbox tick sign?

    Why is my text not showing in my DIV?

    How to draw two non-concentric circles in CSS with numbers inside it?

    How to align social media icons in one row?

    How do I slow down the banner transitions on my homepage? CSS

    Show Limited Data Using jquery

    How to stick to bottom on layout by using CSS?

    How to convert a CSS3 2D animatuon to a 3D Transform

    how to change a css background onclick

    How do prevent my div from spilling outside its parent container?

    I am not sure how to convert my webpages Table over to divs instead

    How to correctly align left in CSS?

    How can I add a border INSIDE this element?

    How to draw many diagonal lines[right hash lines] using css, html?

    How hard is it to make an expanding tab in CSS?