CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user1352057
user1352057

Reputation: 3182

Bootstrap - Remove horizontal navbar lines when collpased

Question background:

I have a navbar which features a list of 3 items and finally a search box with an input button. As shown in the image below when the menu is collapsed there are 2 horizontal lines above and below the search box and button that are only partially extended across the menu. I would like them to expand the entire width. Currently I cant see in the CSS where to adjust these lines?

enter image description here

Code:

This is the markup I have for the menu.

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <form role="form" class="form-inline">
                    <div class="form-group">
                        <ul class="nav navbar-nav">
                            <li><a href="@Url.Action("AllCatagories", "Catagory", new { id = 0})" class="scroll-link" data-id="myCarousel">Products</a></li>
                            <li><a href="@Url.Action("ViewCartContents", "Cart")" class="scroll-link" data-id="Welcome">Cart</a></li>
                            <li><a href="@Url.Action("ContactUs", "Contact")" class="scroll-link" data-id="features">Contact</a></li>
                        </ul>
                    </div>

                    <div class="input-group navbar-form navbar-right ">
                        <input type="text" class="form-control searchInput" name="searchTerm" placeholder="Search this site..." id="searchInput">
                        <button type="submit" value="click" class="btn btn-default searchBtn form-inline"><span class="glyphicon glyphicon-search"></span></button>
                    </div>

                    <div class="navbar-form navbar-right hidden-sm hidden-xs">
                        @Html.Action("MiniCart", "Cart")
                    </div>
                </form>
            </div>

Upvotes: 1

Views: 2090

Answers (1)

Jey DWork
Jey DWork

Reputation: 1766

The element you are looking for is .navbar-form and the lines come from the (webkit-)box-shadow attribute of it.

So if you only want to extend those lines but not the whole element including the mask you would have remove them and create new horizontal rulers above and beneath your element. You would have to style those yourself and make sure they have a width of 100%. You can remove the built in lines (box-shadow) by adding this rule to your custom CSS (which should be loaded after the bootstrap CSS):

.navbar-form {
webkit-box-shadow: inset 0 0 0 rgba(255,255,255,.1),0 0 0 rgba(255,255,255,.1);
box-shadow: inset 0 0 0 rgba(255,255,255,.1),0 0 0 rgba(255,255,255,.1);
}

If you want to extend the lines and don't mind that the whole element including its content also gets extended you can simply add this rule to your custom CSS and don't have to change anything in your markup:

.navbar-form {
width: 100%;
}

Note that in both cases you are modifing the whole .navbar-form class so all instances of this classes in your project will change. If you only want to chage the element in this one instance give it an ID or unique class and use that as selector for this rules.

Upvotes: 1

Related Questions