CODEWITHSUNDEEP
htmltwitter-bootstrap
Patrick
Patrick

Reputation: 414

"Mobile" Bootstrap-Navbar not working

<!DOCTYPE html>
 <html lang="de">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <!--<meta charset="utf-8"> -->
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Stadtfestlauf - Start</title>
   <link rel="icon" type="image/png" href="favicon.png" />

   <!-- Bootstrap -->
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/style.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 id="avcontent">
   <nav class="navbar navbar-default navbar-inverse" role="navigation">
     <div class="container-fluid" id="navfluid">
       <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
       <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="./Index.html">Stadtfestlauf</a>
    </div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav">
   <li class="active"><a href="./Index.html">Startseite</a></li>
   <li><a href="./Rueckblick.html">R&uuml;ckblick</a></li>
   <li><a href="./Wettbewerb.html">Wettbewerb</a>
   <li><a href="./anmelden.html">Anmelden</a>
   <li><a href="./sponsoren.html">Sponsoren</a>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"@-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].
appendChild(msViewportStyle);
}
</script>

<div class="container" id="pcontent">
  <div class="col-md-7">
    <div class="jumbotron">
       <h1>Hallo</h1>
       <p>sample text</p>

       <div class="wrapper">
         <p><a class="btn btn-primary btn-lg" role="button" id="sendButton" href="http://google.com/">Ich bin hier vollkommen Falsch</a></p>
       </div>
   </div>
</div>

<div class="col-md-5" id="imgslide">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
       <div class="item active">
     <img src="Assets/img1.jpg" alt="Stadtfestlauf" id="img">
       </div>
       <div class="item">
     <img src="Assets/img2.jpg" alt="Stadtfestlauf" id="img">
       </div>
       <div class="item">
        <img src="Assets/img3.jpg" alt="Stadtfestlauf" id="img">
       </div>
   </div>
</div>
</div>
</div>
</body>
</html>

Here's a my index.html. When I try it out on my mobile, the navigation bar doesn't work. I searched for missing div's tags.

Upvotes: 27

Views: 109935

Answers (5)

C RICH
C RICH

Reputation: 513

2023 Solution from Bootstrap API docs

Assuming no syntax errors inside your nav tag...

Put this code in the head of your HTML file. It "plugs in" jQuery & Popper, which Bootstrap depends on in order to make the "mobile" navbar work.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Reference

Upvotes: 2

Sunmean
Sunmean

Reputation: 1

Make sure that you put jQuery script before Bootscript link in your header part i.e. (in the following order)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Upvotes: 0

Sebsemillia
Sebsemillia

Reputation: 9486

You need to change the data-targetof your button to the ID of your navbar-collapseelement.

Furthermore your html is missing some closing <li>'s.

Change your nav code to this:

<nav class="navbar navbar-default navbar-inverse" role="navigation">
   <div class="container-fluid" id="navfluid">
       <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
               <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="./Index.html">Stadtfestlauf</a>
       </div>
       <div class="collapse navbar-collapse" id="navigationbar">
           <ul class="nav navbar-nav">
               <li class="active"><a href="./Index.html">Startseite</a></li>
               <li><a href="./Rueckblick.html">R&uuml;ckblick</a></li>
               <li><a href="./Wettbewerb.html">Wettbewerb</a></li>    
               <li><a href="./anmelden.html">Anmelden</a></li>
               <li><a href="./sponsoren.html">Sponsoren</a></li>
           </ul>
      </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->
</nav>

Upvotes: 51

Doug Murphy
Doug Murphy

Reputation: 463

It's also necessary to import jQuery before importing bootstrap, out of order it won't work. It should look like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Upvotes: 20

Alexander
Alexander

Reputation: 737

For my the solution was to add 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Upvotes: 6

Related Questions