Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 1

Navbar não funciona quando a tela é reduzida

10-10-2018 21:11

Boa noite,

Estou começando agora com esta linguagem e estou precisando de ajuda. Estou tentando fazer um barra de navegação responsiva, mas quando reduzo a tela pra teste e clico nas três barrinhas, o menu não aparece. Já tentei comparar com Templates prontos no bootstrap para ver se conseguiria encontra o erro. Sem sucesso! Alguém pode me ajudar a mostra aonde errei?
<nav class="navbar navbar-default navbar-fixed-top"><!--nav--> <div class="container" style="padding-bottom: 30px"><!--container fluid--> <div class="navbar-header" ><!--navbar header--> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1"><!--botao de navegação--> <span class="sr-only">Alternar de navegação</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button><!-- fim botao de navegação--> <a class="navbar-brand" href="#"><img src="img/logo.png" alt="OurLady Marketing" style="width: 130px; height: 65px; "></a> </div><!-- fim navbar header--> <div id="navbar1" class="collapse navbar-collapse" style="padding-top: 15px; padding-right: 30px" > <ul class="nav navbar-nav navbar-right " > <li><a href="#" class="hoverbar active"><span style="color: #004197; font-size: 15px">Aprensentação</span></a></li> <li role="separator" class="divider"></li> <li><a href="#" class="hoverbar"><span style="color: #004197; font-size: 15px">Contato</span></a></li> </ul> </div> </div><!-- fim container fluid--> </nav><!--fim nav-->

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17850
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Navbar não funciona quando a tela é reduzida

12-10-2018 14:56

Supondo que seja um menu para ser usado em celulares e tablets recomendo que você procure menus responsivos prontos.
Porque cada navegador pode ter uma configuração diferente.

O menu do link a seguir é responsivo e bem fácil de alterar https://www.w3schools.com/howto/howto_j ... onsive.asp

Já nesse link a seguir você pode criar um menu responsivo personalizado http://cssmenumaker.com/responsive-menus
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado