Olá! Eu estou montando um site responsivo e usando alguns layouts do bootstrap pra fazer o site. O problema é que o layout que eu mais gostei ele não foi feito com um menu bom para muito conteúdo, principalmente para usuários com a tela menor que 768px.
Então eu tive uma ideia, usar JS para que acima de 768px eu ter um tipo de layout e abaixo outro. Sim eu uso media querie, mas como são layouts do bootstrap eu preciso tirar e colocar algumas classes no html dependendo do tamanho da tela e só da pra fazer isso por JS (até onde eu sei).
Logo, abaixo eu tenho o script que eu fiz pra quando der resize na tela entrar o estilo que eu quero, mas o problema é que se a pessoa entrar por um celular ela n vai fazer o resize na tela e não vai entrar o layout automaticamente.
var $element = $("nav");
$(window).resize(function () {
/*Abaixo de 768px, add a classe .navbar-inverse*/
if (window.innerWidth < 768) {
$element.addClass("navbar-inverse");
/* Acima de 768px, se existir a classe navbar-inverse ela é retirada*/
} else {
$element.removeClass("navbar-inverse");
}
});
Resumindo, eu preciso que quando a pessoa entre com uma resolução abaixo de 768px ele adicione a classe .navbar-inverse e que quando ele faça o resize no navegador e entre nesse script que já está pronto.
Obrigadão pela atenção!