Como usar o front-end do bootstrap com o wp_nav_menu?
-
Gostaria de saber como adaptar o CSS do Bootstrap no wp_nav_menu
<?php wp_nav_menu( array( 'theme-location' => 'menu-primario', 'container' => '', 'menu_id' => 'nav', 'menu_class' => 'sf-menu' ) ); ?>
Aqui o html do menu
<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md fixed-top"> <div class="container"> <div class="collapse navbar-collapse" id="navbarsExampleContainer"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Notícias</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Vídeos</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Promoções</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Eventos</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Chat</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Fale Conosco</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu" aria-labelledby="dropdown02"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </div> </nav>
Desde já agradeço!
- Este tópico foi modificado 7 anos, 6 meses atrás por Mário Valney.
- Este tópico foi modificado 7 anos, 6 meses atrás por Mário Valney.
-
Olá @rtcadmin, tudo bem?
É mais fácil você fazer o contrário: escrever o CSS você mesmo para o HTML que o WordPress escreve.
A função wp_nav_menu possui vários parâmetros que você pode usar como o texto antes de depois dos links, classes do container, se vai ser DIV ou UL e por aí vai…
A alternativa é criar um Walker próprio, mas é muito trabalho.
# Criando um Walker
1 – Basta passar a instância da sua classe no parâmetro “walker” da função.
2 – Escrever sua função Walker: clique aqui (em inglês).Abraços
- Esta resposta foi modificada 7 anos, 6 meses atrás por Mário Valney.
Ah… você pode procurar algo pronto nesse sentido. Procurei no Google e achei isso aqui: https://github.com/wp-bootstrap/wp-bootstrap-navwalker e isso aqui: https://br.wordpress.org/plugins/my-bootstrap-menu/
obrigado @mariovalney
Tive que refazer o CSS conforme o Wp
- O tópico ‘Como usar o front-end do bootstrap com o wp_nav_menu?’ está fechado para novas respostas.