Fiz um menu personalizando usando o Bootstrap, no entando, estou tendo um problema quando diminuo o width para <=767px e clico no botão para expandir o menu. Eu sei que esse problema é devido a personalização do menu, alguém poderia me dar uma luz? O que pretendo é ao clicar no botão de expandir o menu ele fique com o mesmo efeito do Default do Bootstrap, na vertical e visível. Eu sei que usando a classe="nav navbar-nav"
, esse efeito ficaria, mas estou usando a classe="nav nav-pills"
.
1 Resposta
Se você deseja deixar as configurações padrões do bootstrap para resoluções iguais e inferiores a 767px você pode utilizar media query para usar o seu css customizado apenas em resoluções superiores, exemplo:
@media screen and (min-width: 767px) {
// se o seu dispositovo for maior que 768px coloque seu css
}
Outro detalhe, existe muito css inline no seu navbar, remova ele e adicione em classes, para que você possa controlar o uso delas pela resolução.