CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user61092
user61092

Reputation: 146

Bootstrap Navbar not collapsing in mobile view

I have been developing a webpage with bootstrap along with some additional styles. The problem is that the navbar is not collapsing in the mobile view. I think that my multiple css files are overlaping. Can anyone suggest me the appropriate changes? Thanks in advance. My html and css codes are here

Upvotes: 0

Views: 665

Answers (2)

Ahs N
Ahs N

Reputation: 8366

Here is the working code:

<div class="navbar navbar-default navbar-fixed-top" role="navigation" data-0="line-height:100px; height:100px; background-color:rgba(0,0,0,0.3);" data-300="line-height:60px; height:60px; background-color:rgba(0,0,0,1);">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="fa fa-bars color-white"></span>
            </button>

             <h1><a class="navbar-brand" href="index.html" style="line-height:50px" data-0="margin-top:20px;" data-300="margin-top:5px;">GrocShop
          </a></h1>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav" data-0="margin-top:20px;" data-300="margin-top:5px;">
                <li class="active"><a href="index.html">Home</a>                </li>
                <li><a href="#section-team">Team</a>

                </li>
                <li><a href="careers.html">Careers</a>

                </li>
            </ul>
        </div>
        <!--/.navbar-collapse -->
    </div>
</div>

Here is the JSFiddle demo of your code

(hide the Result span of JSFiddle.net to be able to click on the nav button)

What was fixed:

  • A style should be defined. navbar-default was added to the div class="navbar ..." that defines the navbar.
  • The CSS for .navbar-toggle where disabled since they made the button to look like a dot.

Upvotes: 0

Ajesh VC
Ajesh VC

Reputation: 635

Try the below solutions

1.Did you include bootstrap.min.js file in your page.

Add below in your file footer and try.

<script src="js/bootstrap.min.js"></script>

OR

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

2.just try change order of loading css files, load your custom css first and bootstrap last.

3.Inspect Page and check for errors(If any path misses make them correct.)

*Include "JQuery" if you miss this. Because Bootstrap JS Needs JQuery for proper working. Must load above bootstrap js.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">

Upvotes: 1

Related Questions