CODEWITHSUNDEEP
twitter-bootstrap
SJJM4EVER
SJJM4EVER

Reputation: 1

Bootstrap Not Working on Mobile

The drop down will not work on mobile devices. I looked everywhere and tried what others have mentioned but nothing seems to work. Can anyone help?

I'm not sure what's wrong with it and would really need this to work as most users seem to visit the mobile version.

Here's the code:

<div class="top1">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar_">
    <div class="navbar-inner navbar-inner_">
        <a class="btn btn-navbar btn-navbar_" data-toggle="collapse" data-target=".nav-collapse_">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>      </a>
        <div class="nav-collapse nav-collapse_ collapse">
            <ul class="nav sf-menu clearfix">
                <li class="active"><a href="index.html">Home</a></li>               
                <li><a href="about.html">About</a></li>                         
                <li class="sub-menu sub-menu-1"><a href="media.html">Media<em></em></a>
                    <ul>                        
                        <li class="sub-menu sub-menu-2"><a href="/films/">Film<em></em></a>
                            <ul>
                                <li><a href="/films/">Released</a></li>
                                <li><a href="/films/inproduction.html">In Production</a></li>
                                <li><a href="/films/indevelopment.html">In Development</a></li>

                            </ul>

                        </li>
                        <li><a href="/music/">Music</a></li>
                        <li><a href="/publishing/">Publications</a></li>                                                                    
                    </ul>                       
                </li>
                <li><a href="whatwedo.html">What We Do</a></li> 
                <li><a href="/blog">News</a></li>                                                                   
                <li><a href="contact.html">Contact</a></li>
<div align="right"><script type="text/javascript">
<!--
var months = new Array(
"January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December");
var currentTime = new Date();
var month = currentTime.getMonth();
var day = currentTime.getDate();
var year = currentTime.getFullYear();
document.write(months[month] + " " + day + ", " + year);
//-->
</script></div>                                         
            </ul>
        </div>
    </div>
</div>  
</div>  
</div>  
</div>

Upvotes: 0

Views: 1178

Answers (1)

user3589620
user3589620

Reputation:

The structure of the (Bootstrap) HTML document:

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title Page</title>
    <!-- Bootstrap CSS -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <!-- YOUR CONTENT HERE -->
    <!-- jQuery -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
  • bootstrap.min.css must be included in the <head> section (<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">)
  • jQuery and bootstrap.min.js must be included at the end of the <body> section. ( <script src="http://code.jquery.com/jquery.js"></script><script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>)
  • First jQuery, than bootstrap.min.js!

The standard navbar of bootstrap:

<nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Title</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav"><!-- navbar-right -->
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Media <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Film</a>
                        <ul>
                            <li><a href="#">Released</a></li>
                            <li><a href="#">In Production</a></li>
                            <li><a href="#">In Development</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Music</a></li>
                    <li><a href="#">Publications</a></li>
                </ul>
            </li>
            <li><a href="#">What we do</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</nav>

Your items included (Home, About, Media, ...). To set the navbar to the right add the class navbar-right

<div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav navbar-rigth">

http://jsfiddle.net/z06pgqn9/

Upvotes: 1

Related Questions