CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
Run
Run

Reputation: 57176

Bootstrap navbar - how to make navbar-header full width

How can make the navbar-header full width or a row on its own?

I added clear:both; on collapse navbar-collapse but all the padding are messed up.

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">

            <!-- navbar-header -->
            <div class="navbar-header" style="border: 4px solid red !important;">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <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>
            </div>
            <!-- navbar-header -->

            <!-- email -->
            <div class="pull-right hidden-xs">
                email: <a href="#">xxx{at}example.com</a>
            </div>
            <!-- email -->

            <!-- collapse content -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="border: 2px solid blue; clear:both;">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="home.html">Home</a></li>
                    <li><a href="work.html">News</a></li>
                    <li><a href="shop.html">Projects</a></li>
                    <li><a href="shop.html">Links</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="contact.html">CV</a></li>
                </ul>


                <div class="pull-right">
                    <form class="navbar-form" role="search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
            <!-- collapse content -->

        </div>

</nav>

Result:

enter image description here

The word Brand should be align with the word Home. Is it possible? What is the proper way doing in Bootstrap?

EDIT:

enter image description here

Upvotes: 0

Views: 2144

Answers (2)

Ganga
Ganga

Reputation: 797

You can simple add margin to .navbar-header and then use media screen to modify it on smaller device's. Here is code: 

.navbar-header {
  margin-left: 15px !important;
}

@media screen and (max-width: 768px) {
  .navbar-header {
    margin-left: -15px !important;
  }
}

Here is codepen with example : http://codepen.io/anon/pen/zqjKpg

Upvotes: 1

Vucko
Vucko

Reputation: 20834

Here's the fiddle. Use media query and reset the padding for the smaller screens:

.navbar-brand{
  padding: 15px 15px 15px 30px;
}

@media (max-width: 768px){
     .navbar-brand{
        padding: 15px;
    }  
}

Bootstrap documentation for it's media querys

Upvotes: 1

Related Questions