Bootstrap how to put the nav bar in a drop menu for short screen?










0















I try to set up my index page from a combination of the jumbotron and the fix nav bar bootstrap examples.



Using the fix nav bar page of bootstrap, if one reduces the width of the window instead of a navbar list, you obtain a drop menu with the content of the navbar. In my case it does not work. I do not understand what is missing there.



Nevertheless, if I copy the lines between the <nav> and </nav> html tags into the bootstrap example pages it works.



This is my index.html page :



<!DOCTYPE html>
<html lang="en-US">

<head><meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">
<meta name="author" content="Association M'Langues">

<link rel="icon" href="">

<title>Mon Association</title>

<!-- Bootstrap: Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bootstrap: Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet" href="/css/styles.css">
<!-- Begin Jekyll SEO tag v2.5.0 -->
<title>Mon Association</title>
<meta name="generator" content="Jekyll v3.7.4" />
<meta property="og:title" content="Association" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="L’association" />
<meta property="og:description" content="L’association" />
<link rel="canonical" href="http://localhost:4000/index2" />
<meta property="og:url" content="http://localhost:4000/index2" />
<meta property="og:site_name" content="Association" />
<script type="application/ld+json">
"description":"L’association .","@type":"WebPage","url":"http://localhost:4000/index2","headline":"Association","@context":"http://schema.org"</script>
<!-- End Jekyll SEO tag -->

</head>

<body>

<!-- HEADER --><!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Association </a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"><li class="">
<a href="/activites/">Activités</a>
</li>
<li class="">
<a href="/actualites">Actualités de l'association</a>
</li>
<li class="">
<a href="/contact/">Contact</a>
</li>
<li class="">
<a href="/about/">À Propos</a>
</li>

</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Association </h1>
<p>L'association a pour objectif la promotion .</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="container">

<p>Bonjour !</p>

<p>Bienvenu sur le site de l’Association </p>


<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>

<!-- FOOTER --><footer>

<p class="copyright">Association </p>

<p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
</footer>
</div>




<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>
</body>
</html>









share|improve this question






















  • Check the Bootstrap Basic Template, the JQuery plugin should be included before the Bootstrap minified javascript file.

    – Shidersz
    Nov 15 '18 at 3:54











  • I put the bootstrap.min.js at the end after the footer and it works now ! Many thanks.

    – Ger
    Nov 15 '18 at 8:47











  • You are welcome, I made and answer with the details.

    – Shidersz
    Nov 16 '18 at 2:35















0















I try to set up my index page from a combination of the jumbotron and the fix nav bar bootstrap examples.



Using the fix nav bar page of bootstrap, if one reduces the width of the window instead of a navbar list, you obtain a drop menu with the content of the navbar. In my case it does not work. I do not understand what is missing there.



Nevertheless, if I copy the lines between the <nav> and </nav> html tags into the bootstrap example pages it works.



This is my index.html page :



<!DOCTYPE html>
<html lang="en-US">

<head><meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">
<meta name="author" content="Association M'Langues">

<link rel="icon" href="">

<title>Mon Association</title>

<!-- Bootstrap: Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bootstrap: Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet" href="/css/styles.css">
<!-- Begin Jekyll SEO tag v2.5.0 -->
<title>Mon Association</title>
<meta name="generator" content="Jekyll v3.7.4" />
<meta property="og:title" content="Association" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="L’association" />
<meta property="og:description" content="L’association" />
<link rel="canonical" href="http://localhost:4000/index2" />
<meta property="og:url" content="http://localhost:4000/index2" />
<meta property="og:site_name" content="Association" />
<script type="application/ld+json">
"description":"L’association .","@type":"WebPage","url":"http://localhost:4000/index2","headline":"Association","@context":"http://schema.org"</script>
<!-- End Jekyll SEO tag -->

</head>

<body>

<!-- HEADER --><!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Association </a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"><li class="">
<a href="/activites/">Activités</a>
</li>
<li class="">
<a href="/actualites">Actualités de l'association</a>
</li>
<li class="">
<a href="/contact/">Contact</a>
</li>
<li class="">
<a href="/about/">À Propos</a>
</li>

</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Association </h1>
<p>L'association a pour objectif la promotion .</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="container">

<p>Bonjour !</p>

<p>Bienvenu sur le site de l’Association </p>


<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>

<!-- FOOTER --><footer>

<p class="copyright">Association </p>

<p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
</footer>
</div>




<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>
</body>
</html>









share|improve this question






















  • Check the Bootstrap Basic Template, the JQuery plugin should be included before the Bootstrap minified javascript file.

    – Shidersz
    Nov 15 '18 at 3:54











  • I put the bootstrap.min.js at the end after the footer and it works now ! Many thanks.

    – Ger
    Nov 15 '18 at 8:47











  • You are welcome, I made and answer with the details.

    – Shidersz
    Nov 16 '18 at 2:35













0












0








0








I try to set up my index page from a combination of the jumbotron and the fix nav bar bootstrap examples.



Using the fix nav bar page of bootstrap, if one reduces the width of the window instead of a navbar list, you obtain a drop menu with the content of the navbar. In my case it does not work. I do not understand what is missing there.



Nevertheless, if I copy the lines between the <nav> and </nav> html tags into the bootstrap example pages it works.



This is my index.html page :



<!DOCTYPE html>
<html lang="en-US">

<head><meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">
<meta name="author" content="Association M'Langues">

<link rel="icon" href="">

<title>Mon Association</title>

<!-- Bootstrap: Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bootstrap: Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet" href="/css/styles.css">
<!-- Begin Jekyll SEO tag v2.5.0 -->
<title>Mon Association</title>
<meta name="generator" content="Jekyll v3.7.4" />
<meta property="og:title" content="Association" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="L’association" />
<meta property="og:description" content="L’association" />
<link rel="canonical" href="http://localhost:4000/index2" />
<meta property="og:url" content="http://localhost:4000/index2" />
<meta property="og:site_name" content="Association" />
<script type="application/ld+json">
"description":"L’association .","@type":"WebPage","url":"http://localhost:4000/index2","headline":"Association","@context":"http://schema.org"</script>
<!-- End Jekyll SEO tag -->

</head>

<body>

<!-- HEADER --><!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Association </a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"><li class="">
<a href="/activites/">Activités</a>
</li>
<li class="">
<a href="/actualites">Actualités de l'association</a>
</li>
<li class="">
<a href="/contact/">Contact</a>
</li>
<li class="">
<a href="/about/">À Propos</a>
</li>

</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Association </h1>
<p>L'association a pour objectif la promotion .</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="container">

<p>Bonjour !</p>

<p>Bienvenu sur le site de l’Association </p>


<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>

<!-- FOOTER --><footer>

<p class="copyright">Association </p>

<p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
</footer>
</div>




<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>
</body>
</html>









share|improve this question














I try to set up my index page from a combination of the jumbotron and the fix nav bar bootstrap examples.



Using the fix nav bar page of bootstrap, if one reduces the width of the window instead of a navbar list, you obtain a drop menu with the content of the navbar. In my case it does not work. I do not understand what is missing there.



Nevertheless, if I copy the lines between the <nav> and </nav> html tags into the bootstrap example pages it works.



This is my index.html page :



<!DOCTYPE html>
<html lang="en-US">

<head><meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">
<meta name="author" content="Association M'Langues">

<link rel="icon" href="">

<title>Mon Association</title>

<!-- Bootstrap: Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bootstrap: Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet" href="/css/styles.css">
<!-- Begin Jekyll SEO tag v2.5.0 -->
<title>Mon Association</title>
<meta name="generator" content="Jekyll v3.7.4" />
<meta property="og:title" content="Association" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="L’association" />
<meta property="og:description" content="L’association" />
<link rel="canonical" href="http://localhost:4000/index2" />
<meta property="og:url" content="http://localhost:4000/index2" />
<meta property="og:site_name" content="Association" />
<script type="application/ld+json">
"description":"L’association .","@type":"WebPage","url":"http://localhost:4000/index2","headline":"Association","@context":"http://schema.org"</script>
<!-- End Jekyll SEO tag -->

</head>

<body>

<!-- HEADER --><!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Association </a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"><li class="">
<a href="/activites/">Activités</a>
</li>
<li class="">
<a href="/actualites">Actualités de l'association</a>
</li>
<li class="">
<a href="/contact/">Contact</a>
</li>
<li class="">
<a href="/about/">À Propos</a>
</li>

</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Association </h1>
<p>L'association a pour objectif la promotion .</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="container">

<p>Bonjour !</p>

<p>Bienvenu sur le site de l’Association </p>


<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>

<!-- FOOTER --><footer>

<p class="copyright">Association </p>

<p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
</footer>
</div>




<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>
</body>
</html>






html twitter-bootstrap twitter-bootstrap-3 navbar






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 14 '18 at 21:24









GerGer

2,40042132




2,40042132












  • Check the Bootstrap Basic Template, the JQuery plugin should be included before the Bootstrap minified javascript file.

    – Shidersz
    Nov 15 '18 at 3:54











  • I put the bootstrap.min.js at the end after the footer and it works now ! Many thanks.

    – Ger
    Nov 15 '18 at 8:47











  • You are welcome, I made and answer with the details.

    – Shidersz
    Nov 16 '18 at 2:35

















  • Check the Bootstrap Basic Template, the JQuery plugin should be included before the Bootstrap minified javascript file.

    – Shidersz
    Nov 15 '18 at 3:54











  • I put the bootstrap.min.js at the end after the footer and it works now ! Many thanks.

    – Ger
    Nov 15 '18 at 8:47











  • You are welcome, I made and answer with the details.

    – Shidersz
    Nov 16 '18 at 2:35
















Check the Bootstrap Basic Template, the JQuery plugin should be included before the Bootstrap minified javascript file.

– Shidersz
Nov 15 '18 at 3:54





Check the Bootstrap Basic Template, the JQuery plugin should be included before the Bootstrap minified javascript file.

– Shidersz
Nov 15 '18 at 3:54













I put the bootstrap.min.js at the end after the footer and it works now ! Many thanks.

– Ger
Nov 15 '18 at 8:47





I put the bootstrap.min.js at the end after the footer and it works now ! Many thanks.

– Ger
Nov 15 '18 at 8:47













You are welcome, I made and answer with the details.

– Shidersz
Nov 16 '18 at 2:35





You are welcome, I made and answer with the details.

– Shidersz
Nov 16 '18 at 2:35












1 Answer
1






active

oldest

votes


















1














The Bootstrap minified javascript file:



<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


should be included after the JQuery minified javascript file:



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


So, your code should be like this:



<!DOCTYPE html>
<html lang="en-US">

<head>

<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Association M'Langues">

<link rel="icon" href="">
<title>Mon Association</title>

<!-- Bootstrap: Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="/css/styles.css">
<!-- Begin Jekyll SEO tag v2.5.0 -->
<title>Mon Association</title>
<meta name="generator" content="Jekyll v3.7.4" />
<meta property="og:title" content="Association" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="L’association" />
<meta property="og:description" content="L’association" />
<link rel="canonical" href="http://localhost:4000/index2" />
<meta property="og:url" content="http://localhost:4000/index2" />
<meta property="og:site_name" content="Association" />
<script type="application/ld+json">
"description":"L’association .","@type":"WebPage","url":"http://localhost:4000/index2","headline":"Association","@context":"http://schema.org"</script>
<!-- End Jekyll SEO tag -->

</head>

<body>

<!-- HEADER --><!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Association </a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="/activites/">Activités</a>
</li>
<li class="">
<a href="/actualites">Actualités de l'association</a>
</li>
<li class="">
<a href="/contact/">Contact</a>
</li>
<li class="">
<a href="/about/">À Propos</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Association </h1>
<p>L'association a pour objectif la promotion .</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
</div>
</div>

<!-- MAIN CONTENT -->
<div class="container">
<p>Bonjour !</p>
<p>Bienvenu sur le site de l’Association </p>

<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>

<!-- FOOTER -->
<footer>
<p class="copyright">Association </p>
<p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
</footer>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>

<!-- Bootstrap: Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>





share|improve this answer






















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53308948%2fbootstrap-how-to-put-the-nav-bar-in-a-drop-menu-for-short-screen%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    The Bootstrap minified javascript file:



    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    should be included after the JQuery minified javascript file:



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


    So, your code should be like this:



    <!DOCTYPE html>
    <html lang="en-US">

    <head>

    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Association M'Langues">

    <link rel="icon" href="">
    <title>Mon Association</title>

    <!-- Bootstrap: Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link rel="stylesheet" href="/css/styles.css">
    <!-- Begin Jekyll SEO tag v2.5.0 -->
    <title>Mon Association</title>
    <meta name="generator" content="Jekyll v3.7.4" />
    <meta property="og:title" content="Association" />
    <meta property="og:locale" content="en_US" />
    <meta name="description" content="L’association" />
    <meta property="og:description" content="L’association" />
    <link rel="canonical" href="http://localhost:4000/index2" />
    <meta property="og:url" content="http://localhost:4000/index2" />
    <meta property="og:site_name" content="Association" />
    <script type="application/ld+json">
    "description":"L’association .","@type":"WebPage","url":"http://localhost:4000/index2","headline":"Association","@context":"http://schema.org"</script>
    <!-- End Jekyll SEO tag -->

    </head>

    <body>

    <!-- HEADER --><!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <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="#">Association </a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
    <li class="">
    <a href="/activites/">Activités</a>
    </li>
    <li class="">
    <a href="/actualites">Actualités de l'association</a>
    </li>
    <li class="">
    <a href="/contact/">Contact</a>
    </li>
    <li class="">
    <a href="/about/">À Propos</a>
    </li>
    </ul>
    </div><!--/.nav-collapse -->
    </div>
    </nav>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
    <div class="container">
    <h1>Association </h1>
    <p>L'association a pour objectif la promotion .</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
    </div>
    </div>

    <!-- MAIN CONTENT -->
    <div class="container">
    <p>Bonjour !</p>
    <p>Bienvenu sur le site de l’Association </p>

    <!-- Example row of columns -->
    <div class="row">
    <div class="col-md-4">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
    <div class="col-md-4">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
    <div class="col-md-4">
    <h2>Heading</h2>
    <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
    </div>

    <!-- FOOTER -->
    <footer>
    <p class="copyright">Association </p>
    <p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
    </footer>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>

    <!-- Bootstrap: Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
    </html>





    share|improve this answer



























      1














      The Bootstrap minified javascript file:



      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


      should be included after the JQuery minified javascript file:



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


      So, your code should be like this:



      <!DOCTYPE html>
      <html lang="en-US">

      <head>

      <meta charset='utf-8'>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="">
      <meta name="author" content="Association M'Langues">

      <link rel="icon" href="">
      <title>Mon Association</title>

      <!-- Bootstrap: Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <link rel="stylesheet" href="/css/styles.css">
      <!-- Begin Jekyll SEO tag v2.5.0 -->
      <title>Mon Association</title>
      <meta name="generator" content="Jekyll v3.7.4" />
      <meta property="og:title" content="Association" />
      <meta property="og:locale" content="en_US" />
      <meta name="description" content="L’association" />
      <meta property="og:description" content="L’association" />
      <link rel="canonical" href="http://localhost:4000/index2" />
      <meta property="og:url" content="http://localhost:4000/index2" />
      <meta property="og:site_name" content="Association" />
      <script type="application/ld+json">
      "description":"L’association .","@type":"WebPage","url":"http://localhost:4000/index2","headline":"Association","@context":"http://schema.org"</script>
      <!-- End Jekyll SEO tag -->

      </head>

      <body>

      <!-- HEADER --><!-- Fixed navbar -->
      <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
      <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <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="#">Association </a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
      <li class="">
      <a href="/activites/">Activités</a>
      </li>
      <li class="">
      <a href="/actualites">Actualités de l'association</a>
      </li>
      <li class="">
      <a href="/contact/">Contact</a>
      </li>
      <li class="">
      <a href="/about/">À Propos</a>
      </li>
      </ul>
      </div><!--/.nav-collapse -->
      </div>
      </nav>

      <!-- Main jumbotron for a primary marketing message or call to action -->
      <div class="jumbotron">
      <div class="container">
      <h1>Association </h1>
      <p>L'association a pour objectif la promotion .</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
      </div>
      </div>

      <!-- MAIN CONTENT -->
      <div class="container">
      <p>Bonjour !</p>
      <p>Bienvenu sur le site de l’Association </p>

      <!-- Example row of columns -->
      <div class="row">
      <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
      </div>
      </div>

      <!-- FOOTER -->
      <footer>
      <p class="copyright">Association </p>
      <p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
      </footer>
      </div>

      <!-- Bootstrap core JavaScript
      ================================================== -->
      <!-- Placed at the end of the document so the pages load faster -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>

      <!-- Bootstrap: Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
      </body>
      </html>





      share|improve this answer

























        1












        1








        1







        The Bootstrap minified javascript file:



        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


        should be included after the JQuery minified javascript file:



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


        So, your code should be like this:



        <!DOCTYPE html>
        <html lang="en-US">

        <head>

        <meta charset='utf-8'>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="Association M'Langues">

        <link rel="icon" href="">
        <title>Mon Association</title>

        <!-- Bootstrap: Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <link rel="stylesheet" href="/css/styles.css">
        <!-- Begin Jekyll SEO tag v2.5.0 -->
        <title>Mon Association</title>
        <meta name="generator" content="Jekyll v3.7.4" />
        <meta property="og:title" content="Association" />
        <meta property="og:locale" content="en_US" />
        <meta name="description" content="L’association" />
        <meta property="og:description" content="L’association" />
        <link rel="canonical" href="http://localhost:4000/index2" />
        <meta property="og:url" content="http://localhost:4000/index2" />
        <meta property="og:site_name" content="Association" />
        <script type="application/ld+json">
        "description":"L’association .","@type":"WebPage","url":"http://localhost:4000/index2","headline":"Association","@context":"http://schema.org"</script>
        <!-- End Jekyll SEO tag -->

        </head>

        <body>

        <!-- HEADER --><!-- Fixed navbar -->
        <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">Association </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
        <li class="">
        <a href="/activites/">Activités</a>
        </li>
        <li class="">
        <a href="/actualites">Actualités de l'association</a>
        </li>
        <li class="">
        <a href="/contact/">Contact</a>
        </li>
        <li class="">
        <a href="/about/">À Propos</a>
        </li>
        </ul>
        </div><!--/.nav-collapse -->
        </div>
        </nav>

        <!-- Main jumbotron for a primary marketing message or call to action -->
        <div class="jumbotron">
        <div class="container">
        <h1>Association </h1>
        <p>L'association a pour objectif la promotion .</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
        </div>
        </div>

        <!-- MAIN CONTENT -->
        <div class="container">
        <p>Bonjour !</p>
        <p>Bienvenu sur le site de l’Association </p>

        <!-- Example row of columns -->
        <div class="row">
        <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        </div>

        <!-- FOOTER -->
        <footer>
        <p class="copyright">Association </p>
        <p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
        </footer>
        </div>

        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>

        <!-- Bootstrap: Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        </body>
        </html>





        share|improve this answer













        The Bootstrap minified javascript file:



        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


        should be included after the JQuery minified javascript file:



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


        So, your code should be like this:



        <!DOCTYPE html>
        <html lang="en-US">

        <head>

        <meta charset='utf-8'>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="Association M'Langues">

        <link rel="icon" href="">
        <title>Mon Association</title>

        <!-- Bootstrap: Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <link rel="stylesheet" href="/css/styles.css">
        <!-- Begin Jekyll SEO tag v2.5.0 -->
        <title>Mon Association</title>
        <meta name="generator" content="Jekyll v3.7.4" />
        <meta property="og:title" content="Association" />
        <meta property="og:locale" content="en_US" />
        <meta name="description" content="L’association" />
        <meta property="og:description" content="L’association" />
        <link rel="canonical" href="http://localhost:4000/index2" />
        <meta property="og:url" content="http://localhost:4000/index2" />
        <meta property="og:site_name" content="Association" />
        <script type="application/ld+json">
        "description":"L’association .","@type":"WebPage","url":"http://localhost:4000/index2","headline":"Association","@context":"http://schema.org"</script>
        <!-- End Jekyll SEO tag -->

        </head>

        <body>

        <!-- HEADER --><!-- Fixed navbar -->
        <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">Association </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
        <li class="">
        <a href="/activites/">Activités</a>
        </li>
        <li class="">
        <a href="/actualites">Actualités de l'association</a>
        </li>
        <li class="">
        <a href="/contact/">Contact</a>
        </li>
        <li class="">
        <a href="/about/">À Propos</a>
        </li>
        </ul>
        </div><!--/.nav-collapse -->
        </div>
        </nav>

        <!-- Main jumbotron for a primary marketing message or call to action -->
        <div class="jumbotron">
        <div class="container">
        <h1>Association </h1>
        <p>L'association a pour objectif la promotion .</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
        </div>
        </div>

        <!-- MAIN CONTENT -->
        <div class="container">
        <p>Bonjour !</p>
        <p>Bienvenu sur le site de l’Association </p>

        <!-- Example row of columns -->
        <div class="row">
        <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        </div>

        <!-- FOOTER -->
        <footer>
        <p class="copyright">Association </p>
        <p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
        </footer>
        </div>

        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>

        <!-- Bootstrap: Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        </body>
        </html>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 16 '18 at 2:34









        ShiderszShidersz

        8,1822832




        8,1822832





























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53308948%2fbootstrap-how-to-put-the-nav-bar-in-a-drop-menu-for-short-screen%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            這個網誌中的熱門文章

            How to read a connectionString WITH PROVIDER in .NET Core?

            Museum of Modern and Contemporary Art of Trento and Rovereto

            In R, how to develop a multiplot heatmap.2 figure showing key labels successfully