login  Naam:   Wachtwoord: 
Registreer je!
 Forum

bootstrap navigatie gaat niet weg op mobiel

Offline GroundZero - 21/06/2015 18:34 (laatste wijziging 21/06/2015 18:35)
Avatar van GroundZeroLid Beste,

ik ben bootstrap aan het leren.
Nu wil ik graag dat wanneer er op mobiel iemand komt de navigatie verdwijnt. In het voorbeeld op hun site gebeurd dit ook, echter gebeurd dit bij mij niet.
Kan iemand mij vertellen waarom?

Op desktop en tablet mag hij blijven, bij mobiel moet hij verdwijnen en moet de rest volledig beeld breedte nemen.

Mijn code hier:

  1. <?php
  2. error_reporting(E_ALL);
  3. ini_set('display_errors', '1');
  4.  
  5. ob_start();
  6. session_start();
  7.  
  8. require_once('includes/config.php');
  9.  
  10. if($_SERVER['REMOTE_ADDR'] != '')
  11. {
  12. echo 'Website is momenteel in onderhoud, kijk snel nogmaals voor de vernieuwde website!';
  13. exit;
  14. }
  15. ?>
  16.  
  17. <!doctype html>
  18. <html lang="nl">
  19.  
  20. <meta charset="utf-8">
  21. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  22.  
  23. <base href="/" />
  24.  
  25. <!-- bootstrap files -->
  26. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  27. <script src="js/bootstrap.min.js"></script>
  28. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  29. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  30.  
  31. html {
  32. position: relative;
  33. min-height: 100%;
  34. }
  35. body {
  36. /* Margin bottom by footer height */
  37. margin-bottom: 60px;
  38. }
  39. .footer {
  40. position: absolute;
  41. bottom: 0;
  42. width: 100%;
  43. /* Set the fixed height of the footer here */
  44. height: 60px;
  45. background-color: #f5f5f5;
  46. }
  47.  
  48. .sidebar-module {
  49. padding: 15px;
  50. margin: 0 -15px 15px;
  51. }
  52. .sidebar-module-inset {
  53. padding: 15px;
  54. background-color: #f5f5f5;
  55. border-radius: 4px;
  56. }
  57. .sidebar-module-inset p:last-child,
  58. .sidebar-module-inset ul:last-child,
  59. .sidebar-module-inset ol:last-child {
  60. margin-bottom: 0;
  61. }
  62.  
  63. </head>
  64.  
  65.  
  66.  
  67.  
  68. <nav class="navbar navbar-default navbar-fixed-top">
  69. <div class="container">
  70. <div class="navbar-header">
  71. <a class="navbar-brand" href="/">
  72.  
  73. </a>
  74. </div>
  75. <div id="navbar" class="collapse navbar-collapse">
  76. <ul class="nav navbar-nav">
  77. <li class="active"><a href="#">Home</a></li>
  78. <li><a href="#about">About</a></li>
  79. <li><a href="#contact">Contact</a></li>
  80. <li class="dropdown">
  81. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  82. <ul class="dropdown-menu">
  83. <li><a href="#">Action</a></li>
  84. <li><a href="#">Another action</a></li>
  85. <li><a href="#">Something else here</a></li>
  86. <li role="separator" class="divider"></li>
  87. <li class="dropdown-header">Nav header</li>
  88. <li><a href="#">Separated link</a></li>
  89. <li><a href="#">One more separated link</a></li>
  90. </ul>
  91. </li>
  92. </ul>
  93. </div>
  94. </div>
  95. </nav>
  96. <!-- end menu -->
  97.  
  98. <div style="display:block; height:70px;"></div>
  99.  
  100. <div class="container">
  101. <div class="row">
  102. <div class="col-md-8">
  103. <h2>Heading</h2>
  104. <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>
  105. <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
  106. </div>
  107. <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
  108. <div class="sidebar-module sidebar-module-inset">
  109. <h2>Heading</h2>
  110. <p>inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier inhoud hier</p>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115.  
  116. <footer class="footer">
  117. <div class="container">
  118. <p class="text-muted">Place sticky footer content here.</p>
  119. </div>
  120. </footer>
  121.  
  122. </body>
  123. </html>

3 antwoorden

Gesponsorde links
Offline Thomas - 21/06/2015 19:02 (laatste wijziging 21/06/2015 19:03)
Avatar van Thomas Moderator Zou je eerst eens
> In
> Je
> Andere
> Topics
aan kunnen geven wat daar de status van is?

Markeer deze als opgelost, waarbij je de juiste reactie markeert als oplossing.
Offline GroundZero - 21/06/2015 19:05 (laatste wijziging 21/06/2015 19:06)
Avatar van GroundZero Lid Done, zal d'r op letten in 't vervolg
Offline Thomas - 21/06/2015 22:30 (laatste wijziging 21/06/2015 22:31)
Avatar van Thomas Moderator Jouw variant is gebaseerd op dit voorbeeld?

Je houdt niet echt dezelfde volgorde aan van het laden van css en js (alle css zou voor de js ingeladen moeten worden volgens mij).

Ook zit het volgende in dit voorbeeld:
  1. <!-- Custom styles for this template -->
  2. <link href="navbar.css" rel="stylesheet">

wat in jouw variant ontbreekt.

Waarom stop je dat niet ook in een aparte CSS-file maar schrijf je deze custom styles inline uit?
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.204s