Burger menu closes when I click on a dropdown inside it

Question

I have a menu that when opened on mobile turns the responsive burger menu. Inside it I need to have a dropdown link that will display another submenu. So far so good, the problem is that every time I try to expand this dropdown inside the burger menu it closes.

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
  <div class="container">
    <a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="<?php echo BASE_URL;?>/assets/img/logo-nav.png"></a>

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      Menu
      <i class="fas fa-bars"></i>
    </button>

    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-bg navbar-nav text-uppercase ml-auto">

        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#about">o evento</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#informacoes">informações</a>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link js-scroll-trigger dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"  aria-expanded="false">Programação</a>

          <div class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="background-color: transparent;border: 0px;">
            <a class="nav-link js-scroll-trigger dropdown-item" href="#services">Palestrantes</a>
            <a class="nav-link js-scroll-trigger dropdown-item" href="#timelineSection">Timeline</a>
          </div>

        </li>

        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#galeria">Galeria</a>
        </li>

        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#contact">Contato</a>
        </li>

        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" onclick="$('#modalPatrocinio').modal('show');">Expositores</a>
        </li>

        <li class="nav-item" style="background-color:#DFA801;border-radius:5px">
          <a class="nav-link js-scroll-trigger" href="pagamento" style="color:#000">
            <b>inscrições</b></a>
        </li>

      </ul>
    </div>
  </div>
</nav>

What would be the most correct way for me to make this submenu burger? I’ve had this problem before and I couldn’t solve it

Answer 1

I couldn’t solve the problem of clicking and closing the submenu, but I solved the problem by making some media queries that hide the dropdown when it’s mobile and display the items right in the menu. And when it’s desktop, hide the items and display the submenu:

CSS:

    /* Telefones em paisagem e abaixo */
@media (max-width: 480px) {
  .desktop{
    display:none;
  }
 }

/* Telefones em paisagem a tablet em retrato */
@media (max-width: 767px) {
  .desktop{
    display:none;
  }
}


@media (min-width: 768px) and (max-width: 979px) {
  .mobile{
    display:none;
  }
}

/* Desktop grande */
@media (min-width: 1200px) {
  .mobile{
    display:none;
  }
}

HTML:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
  <div class="container">
    <a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="<?php echo BASE_URL;?>/assets/img/logo-nav.png"></a>

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      Menu
      <i class="fas fa-bars"></i>
    </button>

    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-bg navbar-nav text-uppercase ml-auto">
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#about">o evento</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#informacoes">informações</a>
        </li>


        <li class="nav-item dropdown desktop">
          <a class="nav-link js-scroll-trigger dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"  aria-expanded="false">Programação</a>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="background-color: transparent;border: 0px;">
            <a class="nav-link js-scroll-trigger dropdown-item" href="#services">Palestrantes</a>
            <a class="nav-link js-scroll-trigger dropdown-item" href="#timelineSection">Timeline</a>
          </div>
        </li>


          <li class="nav-item">
            <a class="nav-link js-scroll-trigger mobile" href="#services">Palestrantes</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger mobile" href="#timelineSection">Timeline</a>
          </li>


        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#galeria">Galeria</a>
        </li>

        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#contact">Contato</a>
        </li>

        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" onclick="$('#modalPatrocinio').modal('show');">Expositores</a>
        </li>

        <li class="nav-item" style="background-color:#DFA801;border-radius:5px">
          <a class="nav-link js-scroll-trigger" href="pagamento" style="color:#000">
            <b>inscrições</b></a>
        </li>

      </ul>
    </div>
  </div>
</nav>