时间戳

首页 > 解决方案 > Hamburger nav not clickable - already checked scripts and CDN

html - Hamburger nav not clickable - already checked scripts and CDN

问题描述

I've been fighting with this all night. Im trying to implement a simple hamburger menu for the mobile version of my website. Somehow it's not clickable! it just wont expand.

There are no console log errors and I've tried the following:

Moved around all of my script files - order of jquery, bootstrap and js - placed them in head instead of footer

Checked CDN - I mean, I do have a system wide addblocker. But i've put the code live to qtopia.hallometmaxz.nl and it's not working on my phone or tablet either

Changed ID's of classes and even tried to put in a z-index 9999 in css!

<head>

    <link href="assets/fonts/font-awesome.css" rel="stylesheet" type="text/css">
    <link href="assets/fonts/elegant-fonts.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css" type="text/css">
    <link rel="stylesheet" href="assets/css/style.css" type="text/css">

    <script  src="assets/js/jquery-2.2.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>
<div class="page-wrapper">
    <header>



<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
        <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
        </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="navigation animate">
                <li><a href="" data-toggle="modal" data-target="#modal-over-ons">Over Ons</a></li>
                <li><a href="" data-toggle="modal" data-target="#modal-gallery">Foto's</a></li>
                <li><a href="https://www.qtopiaqueerartsfestival.nl/vacatures/" target="_blank">Vacatures</a></li>
                <li><a href="https://www.qtopiaqueerartsfestival.nl/" target="_blank">editie 2018</a></li>
                <li><a href="" data-toggle="modal" data-target="#modal-contact">Contact</a></li>
            </ul></div>
            <!--end navigation-->
  </div>
</nav>
    </header>

&&&

<script  src="assets/js/jquery.validate.min.js"></script>
<script  src="assets/js/jquery.magnific-popup.min.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js"></script>
<script  src="assets/js/exploding-triangles.js"></script>
<script  src="assets/js/custom.js"></script>
</body>

Please help! I need this thing up and running and somehow it just won't work

标签： htmlcssmenunavcollapse

解决方案

如果您愿意，可以参考以下链接。它可能会帮助您制作汉堡图标.. https://www.w3schools.com/howto/howto_js_mobile_navbar.asp

推荐阅读