Duvida Menu Navbar Bootstrap

[JulioSonic]

Boa noite..

Estou desenvolvendo um site de Reiki https://reikicuritiba.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.

O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
nao acontece nada.. segue o trecho do codigo do menu..

<div class="collapse navbar-collapse" id="navbarsExample09">
			<ul class="navbar-nav ml-auto">
			  <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>
			  <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>
			  <li class="nav-item dropdown1">
					<a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>
					<ul class="dropdown-menu">
						<li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>
						<li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>
					</ul>
					
			  </li>
			  <li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>
					<ul class="dropdown-menu" aria-labelledby="dropdown01">
						<li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>
						<li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>
						<li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>
						<li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>
						<li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>
						<li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>
					</ul>
			  </li>
			  <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>
			   <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>
			</ul>
		</div>

Obrigado
Att
Julio Cezar

https://cristaispuroencanto.com.br/
https://mandalatantra.com.br/

[portothree]

Bom dia, Julio. Na verdade o dropdown é ativo quando você faz hover (passar o mouse por cima do elemento) e não com o click. Vi que você colocou uma tag a que tem um attr data-toggle, você está definindo algum comportamento no JS ou é apenas pro aria-labelledby?

Chuto que você quer este comportamento do dropdown voltar para o mobile, já que no desktop o comportamento de hover pra um dropdown assim é satisfatório.

De qualquer maneira, se você espera uma ação de dropdown depois do click do usuário vai ter que ser feito com JS ou usando algum trick de css como um checkbox onde você 'permite' o dropdown quando ativo.

[JulioSonic]

É isso mesmo.. no PC o comportamento esta normal.. o ajuste é na versao Mobile mesmo.

Como posso fazer esse trick?

[portothree]

Da uma procurada em dropdown feito com checkbox em CSS, aqui por exemplo: http://www.felipefialho.com/css-components/#component-dropdown e https://codepen.io/arthurtw/pen/Vjpmwq
É bom notar que ao optar por esse método você pode ter problemas de acessibilidade, já escrevi sobre um caso parecido, talvez ajude:
https://medium.com/@portothree/checkbox-acess%C3%ADvel-com-css-puro-dcdc873888b5