0

I'm having an issue with bootstrap dropdown, it works fine in big screen sizes, but when testing in mobile devices it appears already expanded, overlapping the following menu links. Here's my html for nav:

<!-- NAVBAR -->

<nav class="navbar-interna">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header" style="width: 100%;">
            <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 class="row">
                <div class="col-sm" style="float:left;">
                    <a class="navbar-brand" href="index.html"><img src="img/logo.png" data-active-url="img/logo.png" alt="Colegio North Hills" class="img-responsive" ></a>
                </div>
                <div class="col-sm" style="float:right;">
                        <ul class="navbar-sec">
                                <li><a href="https://schoolnet.colegium.com/webapp/">Schoolnet</a></li>
                                <li><a href="http://200.85.120.107:8083/stwa/login.shtml">Schooltrack</a></li>
                        </ul>   
                </div>
            </div>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right main-nav">
                <li><a href="index.html">Inicio</a></li>
                <li class="dropdown">
                  <a href="#intro" class="dropdown-toggle" data-toggle="dropdown">El Colegio<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="kinder.html">Kinder</a></li>
                    <li class="divider"></li>
                    <li><a href="primaria.html">Primaria</a></li>
                    <li class="divider"></li>
                    <li><a href="secundaria.html">Secundaria</a></li>
                    <li class="divider"></li>
                    <li><a href="institucional.html">Institucional</a></li>
                    <li class="divider"></li>
                    <li><a href="25-aniversario.html">25 Años</a></li>
                    <li class="divider"></li>
                    <li><a href="valores.html">Valores</a></li>
                    <li class="divider"></li>
                    <li><a href="sustentabilidad.html">Depto. de Sustentabilidad</a></li>
                  </ul>
                </li>
                <li><a href="#proyectos">Proyectos</a></li>
                <li><a href="#sports">Houses & Sports</a></li>
                <li><a href="#arts">Arts</a></li>
                <li><a href="#noticias">Noticias</a></li>
                <li><a href="descargas.html">Descargas</a></li>
                <li><a href="#" data-toggle="modal" data-target="#modal1" class="btn btn-blue">Admisión</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

And here the scripts:

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>

<script>$('ul.nav li.dropdown').hover(function() {
          $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
        }, function() {
          $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
        });
</script>

<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

You can check the live site (testing server) here:

http://nhtest.esy.es/index.html

What is wrong? Been cracking my head for too long, will appreciate your help!

Sergio Piccioli
  • 11
  • 5

1 Answers1

1

Mobile view changes the navebar classes. try yourself by changing view/resizing browser width to mobile size on you PC and Inspect the link/dropdown and you can see how it changes classes. here is the selector path for your first link in drop down menu from - 

#bs-example-navbar-collapse-1 > ul > li.dropdown > ul > li:nth-child(1) > a

to 

body > div.mobile-nav.active > ul > li.dropdown > ul > li:nth-child(1) > a

hope you understood the problem. fix your jquery code to select dropdown in both cases.

further this (How to make Twitter Bootstrap menu dropdown on hover rather than click) link has some usefull fixes for hover. but for small devices hover functionality is not required/functional. so handle that.

ArunK
  • 67
  • 2
  • 10