Bootstrap Nav не работает или не работает

Question

У меня проблемы с загрузкой nav. Я использую эту навигацию для мобильных телефонов, иначе она не будет видна. Логотип слева работает, но кнопки справа нет. Я не могу найти, в чем проблема. 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"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 
</code> 

И 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> 

Я был бы очень признателен за помощь в создании этой работы. Благодаря

Answer 1

Убедитесь, что включают в себя следующее:

Перед закрытием тела тег:

<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> 

В перерывах между тегами головы, но до пользовательского стиля:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">