Twitter Bootstrap Question posted in

Excluding search bar from Bootstrap's navbar collapse-Twitter bootstrap

I know this question has already been asked here:

But mine is different in the sense that my search bar is located in the middle of other nav items, and I want all these other nav items to collapse except my search bar. I wasted a week trying to fix this, but every move I make creates a mess.

This is how my navbar looks:

https://postimg.org/image/7x623zbdi3/

HTML:

    <div class="container" id="responsiveContainer">

        <!-- Title -->
        <div class="navbar-header pull-left">
            <a class="navbar-brand" href="{% url 'index' %}"> abc </a>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right" id="nav">
                <li id="nav-form">
                    <form class="navbar-form">
                        <div class="form-group">
                            <input type="text" id="searchBox" class="form-control">
                            <button id="search" type="submit" class="btn btn-default"><span>  <i class="fa fa-search"></i> </span></button>
                        </div>
                    </form>
                </li>
                <li class="dropdown">
                    <a href="#" id="authentication" class="dropdown-toggle" data-toggle="dropdown"> Sign In/Up <b class="caret"></b></a>
                    <ul class="dropdown-menu" class="dropdownMenu">
                        <li><a href="#" data-target=".signupModal" data-toggle="modal" id="signup"> Sign Up </a></li>
                        <li><a href="#" data-target=".loginModal" data-toggle="modal" id="signin"> Sign In </a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-left" id="nav">
                <li><a href="{% url 'articles' %}"> Article </a></li>
                <li><a href="{% url 'contact' %}"> Contact </a></li>
            </ul>
        </div>
    </div>
</nav>

Custom CSS:

#nav-form {

    margin-right: -30px;
}

#nav input {

    background-color: #D3212D;
    color: white;
    border: 1px solid #E32636;
}

#nav button {

    background-color: #D3212D;
    color: white;
    border-radius: 60px;
    border: 1px solid maroon;
    box-shadow: 0px 0px 1px black;
    font-family: FontAwesome;
    font-size: 16px;
}

#nav button:hover {

    background-color: #cd1b27;
    box-shadow: 0px 0px 5px black;
}

input#search, select.form-control {

    background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
    box-shadow: 0px 0px 5px orange;
 }

 #navbarToggle {

    background-color: #E32636;
    margin-top: 0px;
    border: 1px solid #E32636;
 }

 #navbarToggle:hover, #navbarToggle:focus {

    text-shadow: 0px 0px 1px rgb(32,42,62);
    background-color: #E32636;
 }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After a lot of debugging I finally found the solution and here it is:

    HTML:

    <!-- Navigational Bar -->

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="navbarToggle">
            <span class="sr-only">Toggle navigation</span>
            <span><i class="fa fa-list fa-2x"></i></span>
        </button>

        <div class="container" id="responsiveContainer">

            <!-- Title -->
            <div class="navbar-header pull-left">
                <a class="navbar-brand" href="{% url 'index' %}"><img id="navbar-logo" src="/static/media/Images/ditookcolored.png"></a>
            </div>
            <div class="navbar-header pull-right">
                <!-- <button class="btn btn-default" id="mobileSearch"><i class="fa fa-search"></i></button> -->
                <ul class="nav navbar-nav navbar-right" id="nav">
                    <li id="nav-form">
                        <form class="navbar-form navbar-center" id="navbarForm">
                            <div class="form-group">
                                <input type="text" placeholder="Search Ditook" id="searchBox" class="form-control">
                                <button id="search" type="submit" class="btn btn-default"><span>  <i class="fa fa-search"></i> </span></button>
                            </div>
                        </form>
                    </li>
                </ul>
            </div>

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right" id="nav">
                    <!-- <li id="nav-form">
                        <form id="navbarForm">
                            <div class="form-group">
                                <input type="text" placeholder="Search Ditook" id="searchBox" class="form-control">
                                <button id="search" type="submit" class="btn btn-default"><span>  <i class="fa fa-search"></i> </span></button>
                            </div>
                        </form>
                    </li> -->
                    <li class="dropdown">
                        <a href="#" id="authentication" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-arrow-circle-down"></i> Sign In/Up </a>
                        <ul class="dropdown-menu">
                            <li><a href="#" data-target="#signupModal" data-toggle="modal" id="signup"><i class="fa fa-user-plus"></i> Sign Up </a></li>
                            <li><a href="#" data-target="#loginModal" data-toggle="modal" id="signin"><i class="fa fa-sign-in"></i> Sign In </a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-left" id="nav">
                    <li><a href="{% url 'articles' %}"><i class="fa fa-list-alt"></i> Article </a></li>
                    <li><a href="{% url 'contact' %}"><i class="fa fa-phone"></i> Contact </a></li>
                </ul>
            </div>
        </div>
    </nav>

    This actually fixed my problem:

    Custom CSS:

    #nav input {

    position: static;
    margin-left: -400px;
}

#nav button {

    position: static;
    margin-left: -1px;
    height: 35px;
}

  2. 0

    One of those articles you referenced does it here.

    The person took the

     < form... /form>

    section and put it in it’s own div. The key is to keep it out of the class=”collapse navbar-collapse”

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search