Vinnaren i pepparkakshustävlingen!
2017-05-12, 16:07
  #1
Medlem
Hej alla! Har ett problem som jag suttit fast med hela dagen, har sökt runt en del, men inte hittat någon lösning som fungerar för mig.

När man resizar browser-fönstret går det inte att klicka på hamburger-ikonen, eller inget poppar upp om man säger så.

Här är min HTML (fattar inte varför sista delen blir ofärgad):
Kod:
<!DOCTYPE html>
<
html lang="sv-se">
<
head>
  <
meta charset="utf-8">
  <
meta http-equiv="X-UA-Compatible" content="IE=edge">
  <
meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- 
The above 3 meta tags *mustcome first in the headany other head content must come *afterthese tags -->
  <
title>Satsafett</title>

  <!-- 
Bootstrap -->

  <
link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
  <
link href="satsafettBS.css" rel="stylesheet">
  <
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>

<body>

 <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="mainNavBar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.html" class="navbar-brand">satsafett</a>
    </div>

    <div class="collapse navbar-collapse" id="mainNavBar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Speltips</a></li>
        <li><a href="oddsbonusar.html">Oddsbonusar</a></li>
        <li><a href="tv-matcher.html">TV-matcher</a></li>
        <li><a href="casinobonusar.html">Casinobonusar</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>

</body>
</html> 
Citera
2017-05-12, 16:56
  #2
Medlem
Hur ser din css-fil ut?
Citera
2017-05-12, 18:14
  #3
Medlem
Det glömde jag tillägga, att den är tom än sålänge. CSS-filen allltså.
Citera
2017-05-12, 19:34
  #4
Moderator
Protons avatar
Citat:
Ursprungligen postat av bananbus
Hej alla! Har ett problem som jag suttit fast med hela dagen, har sökt runt en del, men inte hittat någon lösning som fungerar för mig.

När man resizar browser-fönstret går det inte att klicka på hamburger-ikonen, eller inget poppar upp om man säger så.

Här är min HTML (fattar inte varför sista delen blir ofärgad):
Kod:
<!DOCTYPE html>
<
html lang="sv-se">
<
head>
  <
meta charset="utf-8">
  <
meta http-equiv="X-UA-Compatible" content="IE=edge">
  <
meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- 
The above 3 meta tags *mustcome first in the headany other head content must come *afterthese tags -->
  <
title>Satsafett</title>

  <!-- 
Bootstrap -->

  <
link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
  <
link href="satsafettBS.css" rel="stylesheet">
  <
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>

<body>

 <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="mainNavBar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.html" class="navbar-brand">satsafett</a>
    </div>

    <div class="collapse navbar-collapse" id="mainNavBar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Speltips</a></li>
        <li><a href="oddsbonusar.html">Oddsbonusar</a></li>
        <li><a href="tv-matcher.html">TV-matcher</a></li>
        <li><a href="casinobonusar.html">Casinobonusar</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>

</body>
</html> 
Taget från bootstraps egen sida:

Citat:
Requires JavaScript plugin

If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

Det är inte där problemet börjar då, låter ju som det om det nu funkar helt utfällt liksom?

http://getbootstrap.com/components/#navbar

Säker på att du får med dig denna plugin i bootstrap.min.js?
Citera
2017-05-12, 19:39
  #5
Medlem
Jag saknar #-tecknet här, data-target="mainNavBar"

Avgår
Citera

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback