CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
flolaloop
flolaloop

Reputation: 129

Jasny bootstrap mobile not working

I am using Jasny Bootstrap for my responsive website. However, the links for the sub-navigations does not work on mobile. I am able to click into the links when I test it on my desktop. But when I test it on my phone, it only closes the navigation side bar. Following is my code:

<!--mobile nav-->
            <nav id="mob-nav" class="navmenu navmenu-inverse navmenu-fixed-right offcanvas" role="navigation">
              <ul class="nav navmenu-nav">
                <li class="active"><a href="index.html"><span>Home</span></a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>Courses</span> <b class="caret"></b></a>
                    <ul class="dropdown-menu navmenu-nav" role="menu">
                         <li class="dropdown"><a href="1.html" class="dropdown-toggle head">Sub Nav 1</a></li>
                         <li class="divider"></li>
                         <li class="dropdown"><a href="2.html" class="dropdown-toggle head">Sub Nav 2</a></li>
                         <li class="divider"></li>
                         <li class="dropdown"><a href="3.html" class="dropdown-toggle head">Sub Nav 3</a></li>
                         <li class="divider"></li>
                         <li class="dropdown"><a href="4.html" class="dropdown-toggle head">Sub Nav 4</a></li>
                    </ul>
                </li>
                <li><a href="nav2.html">Navigation 2</a></li>
                <li><a href="nav3.html">Navigation 3</a></li>
                <li><a href="nav4.html">Navigation 4</a></li>
                <li><a href="nav5.html">Navigation 5</a></li>
              </ul>
            </nav>
            <!--end mobile nav-->

Could it be a case of clashing js?

Edit: I did some trial and error and found that the class "navmenu-nav" is causing the problem. But I am still unsure how I can debug this.

These are the only js attached:

<script src="js/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jasny-bootstrap.js"></script>
<script src="js/readmore.js"></script>

Upvotes: 0

Views: 959

Answers (1)

shaneparsons
shaneparsons

Reputation: 1639

Just found the answer!

Add: .navmenu-nav.dropdown-menu { position:relative; } to your CSS and like magic, it will work!

Upvotes: 1

Related Questions