Bootstrap Nav link not opening or working [duplicate] - html

Question

This question already has answers here:
Bootstrap Navbar. When I press the button nothing happens
(2 answers)
Closed 6 years ago.
I am having problems with the bootstrap nav. I am using this nav for mobile phones, otherwise it is not visible. Logo on the left works but the button on the right does not. I cannot find what is the problem.
HTML:
<nav class="navbar navbar-default navbar-fixed-top mobile" role="navigation" style="visibility:hidden;">
<div class="container">
<div class="navbar-header page-scroll">
<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" style="background-color:white"></span>
<span class="icon-bar" style="background-color:white"></span>
<span class="icon-bar" style="background-color:white"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top" style="color:white"><img class="pull-left" style="max-width:100px; margin-top: -7px;" src="theme/logo.png"></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">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</code>
And CSS:
<pre>#import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic);
html, body {
height: 100%;
overflow: hidden;
}
:link,:visited {text-decoration:none}
h1,h2,h3,h4,h5,h6,pre,code {font-size:48px;font-weight:400; margin-top: 0; margin-bottom: 0.5em;}
h2 { line-height: 1em; margin-bottom: 0.5em; }
ul,dl,dt,dd,ol,li,/*h1,h2,h3,h4,h5,h6,*/pre,form,body,html,p,blockquote,fieldset,input {margin:0; padding:0}
h3, h4 { font-size:30px; line-height: 1em; margin-bottom:0.5em;}
a img,:link img,:visited img {border:none}
p {margin-bottom: 0.5em;}
hr { margin: 25px 0; height: 1px;
background-color: #333333;
border:1px solid #ffffff;
}
.strong { font-weight: bold; }
/** GLOBAL SETS **/
div { display: block; }
.clear {clear:both;}
.hidden {display:none;}
body {margin:0 0 50px 0;font-size:26px;color:#17331f;font-family:'PT Sans',lucida,tahoma, helvetica, verdana;background:#ffffff;text-align:left; }
a:link, a:visited {color: #253066; text-decoration:underline;}
a:hover, a:focus {text-decoration:none;}
#yhteysheader a:link, #yhteysheader a:visited {color: #ffffff; text-decoration:underline;}
#wrapper {position: fixed;top:185px;width:100%;margin:0 auto;display:block;height: 100%; overflow:auto;}
p, h1, h2 {
padding-left: 20px;
padding-right: 20px;
}
p {
font-size: 18px;
}
#header {top: 0px;
left: 0px;
right: 0px;
position: fixed; display:block;
z-index: 100;height:165px; text-align: left; background:#17331f; box-shadow: 2px 2px 2px #253066; margin:0; padding: 0;}
.contain { width: 1080px; margin: 0 auto;}
.sisalto { min-height: 600px; height: auto; margin-bottom: 35px; margin-top: 14px; /*background: url(images/rattitausta.png) top left no-repeat;*/ }
/*div.topfix { padding-top:105px; }
div.topfix_hist { padding-top:75px; }*/
div.left { float: left; height: 100%; margin: 10px; }
div.right { float: right; height: auto; }
.teksti { width: 760px; }
.tekstikapea { width: 500px; }
.tekstikeski { width: 630px; }
.kuvakeski { width: 375px; }
.kuva { width: 100%; }
.kuvalevea { width: 500px; }
.kuva img { width: 100%; }
isokuva
#menu { display: block;position: relative;height: auto; margin-top: 70px; width: 680px; float: right;}
#menu ul#nav {display: block;position:relative;list-style:none; margin-bottom: 0;height:auto;height:0; padding:0; float: right;}
#menu #nav li {float:left;margin:0;font-size:18px;font-weight:normal;}
#menu #nav li a {display:block;line-height:20px;padding:10px 20px;}
#menu #nav li.firstli a { }
#menu #nav li a:link, #menu #nav li a:visited {color:#ffffff;text-decoration:none;}
#menu #nav li a:hover, #menu #nav li a:focus {color:#FFFFFF;text-decoration:none;}
#menu #nav li.current a {border:1px solid #FFC4C4;color:#FFFFFF;text-decoration:none;}
h1#logo { position: relative; margin: 0; padding: 0; margin-top: 0; display: block; width: 400px; height: 132px; background: transparent url(logo.png); visibility: visible; border: 0;overflow: hidden; z-index: 999: text-align: left; float: left; clear: none !important; }
h1#logo a {
display: block;
text-decoration: none;
overflow: hidden;
border: 0;
height: 132px;
height: 0px !important;
padding-top: 132px;
cursor: pointer;
width: 400px;
clear: none;
}
h1#slogan { color: #ffffff; font-size: 26px; float: left; clear: right;padding-top:10px; margin-bottom: 0; display: block; }
#yhteysheader {
margin-top: 10px;
font-size: 14px;
font-weight: normal;
float: left;
clear: both;
color: #ffffff;
}
#page-content {text-align: left; margin-top 35px; }
#media only screen and (max-width: 1199px) {
#header {
height: 160px;
}
#palvelut h2 {
margin-top: 15px;
}
#yhteysheader {
visibility: hidden;
}
.pored {
padding-left: 10px !important;
}
.veliki {
padding: 0px;
}
.veliki i {
}
#menu ul li {
width: 20%;
padding: 0;
}
.naslov{
margin-top: 210px !important;
}
i {
padding-left: 19px;
}
#menu #nav li a{
padding: 0;
}
}
#media only screen and (max-width: 991px) {
.slicica{
padding-left: 0 !important;
}
}
#media only screen and (max-width: 550px) {
#header {
display: none;
}
.mobile {
visibility: visible !important;
display: block !important;
background-color: #17331F;
color: white !important;
}
.mobile a {
text-decoration:none;
}
#palvelut h2 {
margin-top: 2px;
}
#wrapper{
top: 60px !important;
}
#menu ul li {
padding: 1px;
margin: auto;
}
#menu ul li a {
text-align: center;
font-size: 12px;
padding: 5px;
}
#menu ul li a i {
padding-left: 13px;
}
h2 {
font-size: 30px;
}
p {
font-size: 17px;
}
.forma {
font-size: 17px;
line-height: 10px;
}
.mapa {
height: 500px !important;
}
.veliki i {
padding-left: 0px !important;
}
.dugme{
}
footer{
bottom: 50px !important;
}
.video{
width: 100% !important;
left: 0% !important;
}
}
.video {
width: 60%;
left: 20%;
}
#content .page-text img {border:none;}
div#palvelut ul { /*list-style: none;*/ padding-left: 1em; }
div#footer { background: url(images/bisnesmuotoilulogo.png) bottom left no-repeat; padding-top:30px;margin-top:30px;border-top:1px dotted #ccc; height: 200px; }
.section {padding:30px 20px 20px 20px;text-align:left;}
.section p, .section ul, .section ol {line-height:20px;margin:0 0 20px 0;}
.section ul, .section ol {margin-left:20px;}
.section ul ul, .section ol ul, .section ul ol, .section ol ol {
/*margin:0 0 0 20px;*/
}
.section h2 {color:#BA0000;font-size:22px;font-family:arial;line-height:22px;letter-spacing:-1px;margin:0 0 15px 0;padding:0;}
.section h3 {color:#BA0000;font-family:arial;font-size:19px;margin:0 0 10px 0;}
.section h4 {color:#BA0000;font-family:arial;font-size:15px;margin:0 0 10px 0;}
.section h5 {color:#BA0000;font-family:arial;font-size:13px;margin:0 0 10px 0;}
.section h6 {color:#BA0000;font-family:arial;font-size:10px;margin:0 0 10px 0;}
.section blockquote {
margin:0 0 20px 20px;
line-height: 19px;
font-size:12px;
color:#666;
font-style:italic;
border-left:2px solid #ccc;
padding:0 0 0 15px;
}
.section code {border:1px solid #ececec;padding:2px;font-family: Consolas, Monaco, "Courier New", Courier, monospace;font-size: 12px;background:#f9f9f9;color:#000;}
.section pre code {line-height:17px;padding:15px;border:1px solid #ececec;font-family: Consolas, Monaco, "Courier New", Courier, monospace;font-size: 12px;background:#f9f9f9;color:#000;margin-bottom:22px;display:block;}
.credits {font-size:11px;text-transform:uppercase;color:#666;padding-top:15px;margin-top:30px;border-top:1px dotted #ccc;}
.credits p {margin:0 0 0 0;line-height:16px;padding:5px 0 0 0;}
.credits a:link, .credits a:visited {color:#666;}
.credits a:hover {color:#333}
footer {
overflow: hidden;
}</pre>
I would really appreciate the help in making this work. Thanks

Answer 1

Make sure to include the following:
Before closing body tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
In between your head tags, but before your custom styling:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">