CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user4424299
user4424299

Reputation:

Bootstrap wraps glyphicon on second row in navbar

I'm trying to set up a search box on my Bootstrap website that hides and shows when the search glyphicon is pressed (the hide and show part works), but when the input-box is rendered, the glyphicon is moved to the second row in the navbar:

enter image description here

This is my code:

<nav class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="index.php" class="navbar-brand"></a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="home nav-item">
                            <a href="index.php">
                                <span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home
                            </a>
                        </li>
                        <li class="products nav-item">
                            <a href="products.php">
                                <span class="glyphicon glyphicon-glass" aria-hidden="true"></span> Products
                            </a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="nav-item">
                            <a title="Search" class="search-button">
                                <div class="search"><input type="text" name="search" class="form-control" placeholder="Search..."></div>
                                <span class="glyphicon glyphicon-search"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

And the JavaScript-code which manages the hide- and show-process looks like this:

var $search = $(".search");
    $search.hide();
    $(".glyphicon-search").click(function(){
        if ($search.is(":hidden")){
            $search.fadeIn();
        } else {
            $search.fadeOut();
        }
})

How can I fix this? I've done some trial-and-error with the chrome console, but I found no solution.

This is a link to a JSFiddle demonstrating my problem: https://jsfiddle.net/bu3kqL0d/1/

Upvotes: 0

Views: 445

Answers (2)

Quack
Quack

Reputation: 361

A div is display: block by default which is the reason why the glyphicon gets pushed into the next row. Try:

.search { display: inline-block; }

Upvotes: 2

Mukesh Ram
Mukesh Ram

Reputation: 6328

Add position:absolute; to search icon.

.search-button .glyphicon-search{
  position:absolute;
  top:20px;
  right:0;
}

Upvotes: 0

Related Questions