• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Mobiles Menü öffnet sich nicht

marcovogel108

Neues Mitglied
Hallo liebe Community,

ich habe mir mit Bootstrap vor längerer Zeit eine Webseite (www.marcovogel108.de/) erstellt. Leider öffnet sich auf dem Smartphone das Menü nicht. Google und eigenes probieren haben leider auch zu keiner Lösung geführt. Ich hoffe, dass ihr mir helfen könnt.
Der HTML-Code der Startseite z.B. lautet:
HTML:
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    <!-- Die 3 Meta-Tags oben *müssen* zuerst im head stehen; jeglicher sonstiger head-Inhalt muss *nach* diesen Tags kommen -->
    <meta name="description" content="">
    <meta name="author" content="Marco Vogel" >
    <link rel="icon" href="Bilder_Homepage/favicon.ico">

    <title>Marco Vogel</title>

    <!-- Bootstrap-CSS -->
    <link href="bootstrap.min.css" rel="stylesheet">

    <link href="carousel.css" rel="stylesheet">
    
      <link href="Normalize.css" rel="stylesheet">
 
      <!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//www.marcovogel108.de/Piwik/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', '1']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Piwik Code -->
  </head>

<!-- NAVBAR
================================================== -->
  <body>
 
    <div class="navbar-wrapper">
      <div class="container">

        <nav class="navbar navbar-inverse navbar-static-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">Navigation ein-/ausblenden</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="Start.html">Marco Vogel</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Start</a></li>
                <li><a href="Uebermich.html">Über mich</a></li>
                <li><a href="Kontakt.html">Kontakt</a></li>
                <li><a href="Portfolio.html">Portfolio</a></li>
                <li><a href="Portraitfotografie.html">Portraitfotografie</a></li>
                <li><a href="Blog.html">Blog</a></li>
                <li><a href="Empfehlungen.html">Empfehlungen</a></li>
              </ul>
            </div>
          </div>
        </nav>

      </div>
    </div>


    <!-- Karussell
    ================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Positionsanzeige -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
       <!-- <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li> -->
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="Bilder_Homepage/eltocal_banner1.jpg" alt="Erste Folie">
          <div class="container">
            <div class="carousel-caption">
              <h1>Herzlich Willkommen!</h1>
            </div>
          </div>
        </div>
        <!--
        <div class="item">
          <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Zweite Folie">
          <div class="container">
            <div class="carousel-caption">
              <h1>Noch eine Beispiel-Überschrift.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Mehr erfahren</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Dritte Folie">
          <div class="container">
            <div class="carousel-caption">
              <h1>Aller guten Dinge sind drei.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Galerie erkunden</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Zurück</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Weiter</span>
      </a>
    </div><!-- /.carousel -->

    <!-- Marketing-Botschaften und Präsentationsspalten
    ================================================== -->
    <!-- Der Rest der Seite wird in einem anderen Container verpackt, um den Inhalt schön zu zentrieren. -->

    <div class="container marketing">

      <!-- Drei Spalten Text unter dem Karussell -->
      <div class="row">
        <div class="col-lg-4">
          <img class="img-circle" src="Bilder_Homepage/Marco_hp.jpg" alt="ein Bild von mir in Passau" width="140" height="140">
          <h2>Über mich</h2>
          <p>Mein Name ist Marco Vogel, ich bin 22 Jahre alt und komme aus dem Umkreis Karlsruhe. Du willst mehr wissen? Dann bist du hier richtig! </p>
          <p><a class="btn btn-default" href="Uebermich.html" role="button">Erfahre mehr &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" src="Bilder_Homepage/portfolio_hp.jpg" alt="Caminito del Rey" width="140" height="140">
          <h2>Portfolio</h2>
          <p>Obwohl ich bevorzugt Menschen und Lost Places fotografiere, fotografiere ich auch sonst gerne mal andere Dinge.  </p>
          <p><a class="btn btn-default" href="Portfolio.html" role="button">Zum Portfolio &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" src="Bilder_Homepage/sarah_geländer_hp.jpg" alt="Portrait in der Abendsonne Málagas" width="140" height="140">
          <h2>Portraitfotografie</h2>
          <p>Am liebsten fotografiere ich Menschen. Hier findest du alle Infos und Downloads für gemeinsame Shootings. </p>
          <p><a class="btn btn-default" href="Portraitfotografie.html" role="button">Erfahre mehr &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
      </div><!-- /.row -->



      <!-- FOOTER -->
      <footer>
        <p class="pull-right"><a href="#">Zurück nach oben</a></p>
        <p>&copy; 2017 Marco Vogel</p>
      </footer>

    </div><!-- /.container -->

    <!-- Bootstrap-JavaScript
    ================================================== -->
    <!-- Am Ende des Dokuments platziert, damit Seiten schneller laden -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./css/bootstrap/js/bootstrap.min.js"></script>
    <!-- Nur, um unsere Platzhalter-Bilder zum Laufen zu bringen. Die nächste Zeile nicht wirklich kopieren! -->
    <script src="../../assets/js/vendor/holder.min.js"></script>
    <!-- IE10-Anzeigefenster-Hack für Fehler auf Surface und Desktop-Windows-8 -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Leider ist der bootstrap.min.css-Code zu lang um ihn zu posten, ich hoffe einfach, dass der Fehler im HTML-Code liegt.
Vielen Dank schon mal im Voraus!

Viele Grüße

Marco
 
Zuletzt bearbeitet:
Hallo liebe Community,

ich habe mir mit Bootstrap vor längerer Zeit eine Webseite (www.marcovogel108.de/) erstellt. Leider öffnet sich auf dem Smartphone das Menü nicht. Google und eigenes probieren haben leider auch zu keiner Lösung geführt. Ich hoffe, dass ihr mir helfen könnt.
Der HTML-Code der Startseite z.B. lautet:
HTML:
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    <!-- Die 3 Meta-Tags oben *müssen* zuerst im head stehen; jeglicher sonstiger head-Inhalt muss *nach* diesen Tags kommen -->
    <meta name="description" content="">
    <meta name="author" content="Marco Vogel" >
    <link rel="icon" href="Bilder_Homepage/favicon.ico">

    <title>Marco Vogel</title>

    <!-- Bootstrap-CSS -->
    <link href="bootstrap.min.css" rel="stylesheet">

    <link href="carousel.css" rel="stylesheet">
   
      <link href="Normalize.css" rel="stylesheet">
 
      <!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//www.marcovogel108.de/Piwik/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', '1']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Piwik Code -->
  </head>

<!-- NAVBAR
================================================== -->
  <body>
 
    <div class="navbar-wrapper">
      <div class="container">

        <nav class="navbar navbar-inverse navbar-static-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">Navigation ein-/ausblenden</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="Start.html">Marco Vogel</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Start</a></li>
                <li><a href="Uebermich.html">Über mich</a></li>
                <li><a href="Kontakt.html">Kontakt</a></li>
                <li><a href="Portfolio.html">Portfolio</a></li>
                <li><a href="Portraitfotografie.html">Portraitfotografie</a></li>
                <li><a href="Blog.html">Blog</a></li>
                <li><a href="Empfehlungen.html">Empfehlungen</a></li>
              </ul>
            </div>
          </div>
        </nav>

      </div>
    </div>


    <!-- Karussell
    ================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Positionsanzeige -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
       <!-- <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li> -->
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="Bilder_Homepage/eltocal_banner1.jpg" alt="Erste Folie">
          <div class="container">
            <div class="carousel-caption">
              <h1>Herzlich Willkommen!</h1>
            </div>
          </div>
        </div>
        <!--
        <div class="item">
          <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Zweite Folie">
          <div class="container">
            <div class="carousel-caption">
              <h1>Noch eine Beispiel-Überschrift.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Mehr erfahren</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Dritte Folie">
          <div class="container">
            <div class="carousel-caption">
              <h1>Aller guten Dinge sind drei.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Galerie erkunden</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Zurück</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Weiter</span>
      </a>
    </div><!-- /.carousel -->

    <!-- Marketing-Botschaften und Präsentationsspalten
    ================================================== -->
    <!-- Der Rest der Seite wird in einem anderen Container verpackt, um den Inhalt schön zu zentrieren. -->

    <div class="container marketing">

      <!-- Drei Spalten Text unter dem Karussell -->
      <div class="row">
        <div class="col-lg-4">
          <img class="img-circle" src="Bilder_Homepage/Marco_hp.jpg" alt="ein Bild von mir in Passau" width="140" height="140">
          <h2>Über mich</h2>
          <p>Mein Name ist Marco Vogel, ich bin 22 Jahre alt und komme aus dem Umkreis Karlsruhe. Du willst mehr wissen? Dann bist du hier richtig! </p>
          <p><a class="btn btn-default" href="Uebermich.html" role="button">Erfahre mehr &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" src="Bilder_Homepage/portfolio_hp.jpg" alt="Caminito del Rey" width="140" height="140">
          <h2>Portfolio</h2>
          <p>Obwohl ich bevorzugt Menschen und Lost Places fotografiere, fotografiere ich auch sonst gerne mal andere Dinge.  </p>
          <p><a class="btn btn-default" href="Portfolio.html" role="button">Zum Portfolio &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" src="Bilder_Homepage/sarah_geländer_hp.jpg" alt="Portrait in der Abendsonne Málagas" width="140" height="140">
          <h2>Portraitfotografie</h2>
          <p>Am liebsten fotografiere ich Menschen. Hier findest du alle Infos und Downloads für gemeinsame Shootings. </p>
          <p><a class="btn btn-default" href="Portraitfotografie.html" role="button">Erfahre mehr &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
      </div><!-- /.row -->



      <!-- FOOTER -->
      <footer>
        <p class="pull-right"><a href="#">Zurück nach oben</a></p>
        <p>&copy; 2017 Marco Vogel</p>
      </footer>

    </div><!-- /.container -->

    <!-- Bootstrap-JavaScript
    ================================================== -->
    <!-- Am Ende des Dokuments platziert, damit Seiten schneller laden -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./css/bootstrap/js/bootstrap.min.js"></script>
    <!-- Nur, um unsere Platzhalter-Bilder zum Laufen zu bringen. Die nächste Zeile nicht wirklich kopieren! -->
    <script src="../../assets/js/vendor/holder.min.js"></script>
    <!-- IE10-Anzeigefenster-Hack für Fehler auf Surface und Desktop-Windows-8 -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Leider ist der bootstrap.min.css-Code zu lang um ihn zu posten, ich hoffe einfach, dass der Fehler im HTML-Code liegt.
Vielen Dank schon mal im Voraus!

Viele Grüße

Marco

Ein Blick in die Browser Konsole könnte helfen.

Unbenannt-2.jpg

Und dein Startbild hat einfach mal 13 MB - krass...
 
Oh Mann, hätte ich den Code sauber durchgearbeitet....
Vielen Dank!:)
Und ja, das mit dem Startbild ist mir bewusst, da überlege ich noch nach einer Lösung.. komprimiert möchte ich es nämlich auch nicht nutzen, da die Qualität dann leidet:(
 
Zurück
Oben