Social Navbar

This bootstrap snippet called "Social Navbar" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


<script src="https://use.fontawesome.com/cb2d0db4c2.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
                <div class="container">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
                            <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>
                    <!-- Search Navbar -->
                    <form class="navbar-form navbar-left search-container hidden-xs" role="search">
                        <div class="form-group">
                            <input class="form-control" placeholder="Search" type="text">
                            </input>
                        </div>
                        <button class="btn btn-default btn-search" type="submit">
                            <i aria-hidden="true" class="fa fa-search text-center">
                            </i>
                        </button>
                    </form>
                    <!--END Search navbar -->
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-left">
                            <!--Search xs -->
                            <li class="visible-xs ">
                                <form class="navbar-form navbar-left search-xs" role="search">
                                    <div class="form-group">
                                        <input class="form-control" placeholder="Search" type="text">
                                        </input>
                                    </div>
                                    <button class="btn btn-default search-btn-xs pull-right" type="submit">
                                        Submit
                                    </button>
                                </form>
                            </li>
                            <!-- END Search xs -->
                            <li class="active">
                                <a href="#">
                                    Home
                                    <span class="sr-only">
                                        (current)
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    Profile
                                </a>
                            </li>
                            <li data-placement="bottom" data-toggle="tooltip" title="Friend requests">
                                <a href="">
                                    <i aria-hidden="true" class="fa fa-user">
                                    </i>
                                </a>
                            </li>
                            <li data-placement="bottom" data-toggle="tooltip" title="Messages">
                                <a href="">
                                    <i aria-hidden="true" class="fa fa-envelope-o">
                                    </i>
                                </a>
                            </li>
                            <li data-placement="bottom" data-toggle="tooltip" title="Notifications">
                                <a href="">
                                    <i aria-hidden="true" class="fa fa-globe">
                                    </i>
                                </a>
                            </li>
                            <li class="dropdown">
                                <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
                                    <i aria-hidden="true" class="fa fa-wrench">
                                    </i>
                                    <span class="caret">
                                    </span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="config.html">
                                            Configurations
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            Another action
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            Something else here
                                        </a>
                                    </li>
                                    <li class="divider" role="separator">
                                    </li>
                                    <li>
                                        <a href="#">
                                            About
                                        </a>
                                    </li>
                                    <li class="divider" role="separator">
                                    </li>
                                    <li>
                                        <a data-target="#myModal" data-toggle="modal" href="#myModal">
                                            <i aria-hidden="true" class="fa fa-sign-out">
                                            </i>
                                            Exit
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!-- /.navbar-collxapse -->
                </div>
                <!-- /.container-fluid -->
            </nav>
            <!-- Configuration Modal -->
            <div class="modal fade" id="myModal" role="dialog" tabindex="-1">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                                <span aria-hidden="true">
                                    ×
                                </span>
                            </button>
                            <h4 class="modal-title">
                                <i aria-hidden="true" class="fa fa-sign-out">
                                </i>
                                Exit
                            </h4>
                        </div>
                        <div class="modal-body">
                            <p>
                                Are you sure you want to quit?
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default" data-dismiss="modal" type="button">
                                Close
                            </button>
                            <button class="btn btn-primary" type="button">
                                Exit
                            </button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- Configuration modal -->
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview



/* Search navbar*/

.stylish-input- .input-group-addon {
    background: white !important;
}

.stylish-input-group .form-control {
    border-right: 0;
    box-shadow: 0 0 0;
    border-color: #ccc;
}

.stylish-input-group button {
    border: 0;
    background: transparent;
}

.search-container {
    width: auto;
}

.navbar .container {
    margin-top: 10px;
    padding-bottom: 10px;
}

.search-container .form-group {
    width: auto;
}

.search-container input {
    width: 100% !important;
}

.btn-search {
    margin-left: -5px;
}

.search-xs {
    width: 90% !important;
    margin-left: 5%;
}

.search-btn-xs {
    margin-top: -39px !important;
}

                                    

Information about this bootstrap snippet

Creator: Facundo Chuburu

Bootstrap version: 3.3.6

Created: Sep 4th 2016, 01:22

Views: 517