Guide to aligning two navbar-collapse contents in a single line

Question

Guide to aligning two navbar-collapse contents in a single line

I need to collapse the navigation bar content. I would like to have these contents displayed in the same line (inline).

<header class="navbar navbar-fixed-top" role="navigation">
<div class="navbar-inner">
    <div class="container">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-rt-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-mid-collapse">
            <span class="glyphicon glyphicon-search"></span>
        </button>
        <a class="navbar-brand" rel="home" href="">My Project</a>
        <div class="collapse navbar-collapse" id="navbar-mid-collapse">
                <form class="navbar-form form-inline" role="search" method="get" id="search-form" name="search-form">
                    <div class="input-group">
                        <input type="text" class="form-control">

                        <div class="input-group-btn">
                            <button type="submit" class="btn btn-success"><span
                                    class="glyphicon glyphicon-search"></span></button>
                        </div>
                    </div>
                </form>
        </div>
        <div class="collapse navbar-collapse" id="navbar-rt-collapse">
            <ul class="nav navbar-nav">
                <li><a data-toggle="modal" href="#" data-target="#">Login</a></li>
                <li><a data-toggle="modal" href="#" data-target="#">Register</a></li>
            </ul>
        </div>
    </div>
</div>

How can I display #nabar-mid-collapse and #navbar-rt-collapse in the same line? Thank you!

jquery html css twitter-bootstrap-3

Answer 1

Answer №1

To achieve your desired outcome, you'll need to make some adjustments to your CSS and HTML code:

CSS Changes:

body {
    padding-top: 50px;
}
.navbar-inverse .navbar-toggle {
    color: #fff;
    width: 44px;
    height: 36px;
}
@media (max-width: 767px) {
    .navbar-inverse .navbar-collapse .navbar-form{
        margin: 0;
        border: 0 none;
    }
    .navbar-form .form-group {
        float: left;
        min-width: 80%;
        margin-right: 10px;
    }
}
@media (min-width: 768px) {
    .navbar-collapse.collapse {
        display: inline-block!important;
        float: left;
    }
}

HTML Modifications:

<header class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target="#navbar-rt-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target="#navbar-mid-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="glyphicon glyphicon-search"></span>
            </button>
        <a class="navbar-brand" rel="home" href="">My Project</a>
        </div>
        <div class="navbar-collapse collapse" id="navbar-mid-collapse">
          <form class="navbar-form" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span></button>
          </form>
        </div>
        <div class="navbar-collapse collapse" id="navbar-rt-collapse">
          <ul class="nav navbar-nav">
                <li><a data-toggle="modal" href="#" data-target="#">Login</a></li>
                <li><a data-toggle="modal" href="#" data-target="#">Register</a></li>
          </ul>
        </div>
    </div>
</header>

Check out the Bootply Demo for reference.

Answer 2

To achieve your desired outcome, you'll need to make some adjustments to your CSS and HTML code:

CSS Changes:

body {
    padding-top: 50px;
}
.navbar-inverse .navbar-toggle {
    color: #fff;
    width: 44px;
    height: 36px;
}
@media (max-width: 767px) {
    .navbar-inverse .navbar-collapse .navbar-form{
        margin: 0;
        border: 0 none;
    }
    .navbar-form .form-group {
        float: left;
        min-width: 80%;
        margin-right: 10px;
    }
}
@media (min-width: 768px) {
    .navbar-collapse.collapse {
        display: inline-block!important;
        float: left;
    }
}

HTML Modifications:

<header class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target="#navbar-rt-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target="#navbar-mid-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="glyphicon glyphicon-search"></span>
            </button>
        <a class="navbar-brand" rel="home" href="">My Project</a>
        </div>
        <div class="navbar-collapse collapse" id="navbar-mid-collapse">
          <form class="navbar-form" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span></button>
          </form>
        </div>
        <div class="navbar-collapse collapse" id="navbar-rt-collapse">
          <ul class="nav navbar-nav">
                <li><a data-toggle="modal" href="#" data-target="#">Login</a></li>
                <li><a data-toggle="modal" href="#" data-target="#">Register</a></li>
          </ul>
        </div>
    </div>
</header>

Check out the Bootply Demo for reference.

Answer 3

Answer №2

To create a responsive layout, enclose #nabar-mid-collapse and #navbar-rt-collapse within a div with the class row-fluid.

Next, assign the class col-xs-4 (or any appropriate .col class based on your desired width) to both elements.

For more information on creating grids, refer to the grid system section in the Bootstrap CSS documentation.

Check out this demo for a visual example.

Answer 4

To create a responsive layout, enclose #nabar-mid-collapse and #navbar-rt-collapse within a div with the class row-fluid.

Next, assign the class col-xs-4 (or any appropriate .col class based on your desired width) to both elements.

For more information on creating grids, refer to the grid system section in the Bootstrap CSS documentation.

Check out this demo for a visual example.

Answer 5

Answer №3

When faced with a problem, I found inspiration in @jme11's solution to tackle it this way:

// Utilizing multiple .navbar-collapse.collapse declarations
@media (max-width: 767px) {
    .navbar-collapse:after {
        clear:both;
    }
}
@media (min-width: 768px) {
    .navbar-collapse:after {
        clear:none;
    }
}

I hope this approach proves helpful to others encountering the same issue.

Answer 6

When faced with a problem, I found inspiration in @jme11's solution to tackle it this way:

// Utilizing multiple .navbar-collapse.collapse declarations
@media (max-width: 767px) {
    .navbar-collapse:after {
        clear:both;
    }
}
@media (min-width: 768px) {
    .navbar-collapse:after {
        clear:none;
    }
}

I hope this approach proves helpful to others encountering the same issue.

Guide to aligning two navbar-collapse contents in a single line

Answer №1

Check out the Bootply Demo for reference.

Answer №2

Answer №3

Similar questions

Implementing a PHP script to prompt the user to input two random integers and sum them up on a webpage through $_POST method

Inspector, please demonstrate how to receive the most recent value from the 3-second update

Tips for retrieving the data attribute from a clicked a href tag using jQuery

Send information to PHP controller using DataTables Ajax functionality

Having difficulty replicating the same effect across all five canvas elements

What is the technique for enabling a mouse click in the vicinity of an element?

Using HTML and Javascript to submit a form and display the results within a shadowbox

Loading the static content page in Ionic can be slower the first time on a mobile device

Utilizing dual identifiers in a Jquery plugin

Uploading data through AJAX without saving it in the database

Use the angular cli to incorporate the CSS styles found in the node_modules directory

There was a json parsing error that occurred due to an uncaught TypeError. The error message stated that the 'in' operator cannot be used to search for '1009'

Select box in material design does not show an error when the value is empty

On paste events, CKEditor will strip away all HTML tags except for div and span elements

Title of Json File and Invocation

Trouble with flex wrap in my design template using Material UI

What is the best way to send information from my HTML page to a listener?

Unable to invoke Controller function using ajax request

Designing a Dynamic Floating Element that Shifts with Scroll Movement

Utilize Xpath to transition between different html tags seamlessly