CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Emmanuelle Debarge
Emmanuelle Debarge

Reputation: 16

Trying to make my navbar dragdown on mobile

So basically, im using the data-toggle and data-target to ensure that when my website is mobile it will have a drop down menu. However it does not seem to be working. Here is some of my code

<div class="container">

  <a href = "#" class="navbar-brand">Chey</a>

  <button class = "navbar-toggle"data-toggle = "collapse" data-target =  ".navHeaderCollapse">
    F
  </button>

<div class="collapse navbar-collapse navHeaderCollapse">

  <ul class = "nav navbar-nav navbar-right">

    <li><a href = "#">Home</a></li>
    <li><a href = "#">About</a></li>
    <li><a href = "#">Contact</a></li>

  </ul>


  </div>

Upvotes: 0

Views: 54

Answers (3)

Steve K
Steve K

Reputation: 9055

When using bootstrap you need to use their full navbar markup to get your desired effect. You can find the documentation here Bootstrap Navbars. Read through this documentation for a better understanding of bootstrap navbars. So your markup should look like the following.

<nav class="navbar navbar-default">
    <div class="container">  
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Bootstrap Navbar</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

Here is a fiddle to show you how this works Bootstrap Navbar Fiddle Demo

If you want your navbar to have a dark color you can use navbar-inverse instead of navbar-default, and if you want a navbar that is fized to the top you can add the class of navbar-fixed-top like I did in the fiddle.

This is the correct markup for a bootstrap navbar. There is another answer here from Steff Yang. In this answer he has 2 navbar-header div's floating left and right. There are a couple of issues with this practice. The main being that if you are at a width less than 767px and click on the menu toggle button then resize the window to a bigger width while your menu is still collapsed you will have issues with the navbar. This is problematic for devices that landscape resolutions bigger than 767px and portraits smaller than 767px.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
    <div class="container">  
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Bootstrap Navbar</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

Upvotes: 2

V&#237;ctor Elexpe
V&#237;ctor Elexpe

Reputation: 21

Have you included the javascript files?

  • bootstrap.js or bootstrap.min.js

That files contain all plugins.

script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js')

Upvotes: 0

Steff Yang
Steff Yang

Reputation: 98

Here is a JSFiddle that is based on your HTML code that may help you: https://jsfiddle.net/RxguB/341/

I'm assuming that your nabber is based on Bootstrap and does not have any other custom css, so I simply add a few lines of codes to make your navigation bar fit the Bootstrap format.

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container"> 
        <div class="navbar-header pull-left">     
            <a class="navbar-brand" href="#">Chey</a>
        </div>
        <div class="navbar-header pull-right">
            <button type="button" class="navbar-toggle" 
              data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button> 
        </div>  
        <div class="navbar-collapse collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions