Problemas com navBar do Bootstrap

16/10/2014

0

Ola galera criei uma estrutura do navbar pra que eu possa ter aquele efeito de caixa que voce clica e ele abre o menu com meus links de paginas, porem quando eu clico na minha caixinha ele nao faz nada nao abre meu menu com as opções nao sei o que esta errado.

Veja como eta meu codigo:

        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#controlMenu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="home.aspx" class="navbar-brand nome">Delivery-TI</a>
            </div>
            <div class="collapse navbar-collapse navbar-right" id="controlMenu">
                <form class="navbar-form navbar-right">
                    <ul class="nav navbar-nav">
                        <li class="menu active"><a href="home.aspx"><span class="glyphicon glyphicon-home"></span></a></li>
                        <li class="menu"><a href="design.aspx"><span class="glyphicon glyphicon-leaf"> Design</span></a></li>
                        <li class="menu"><a href="portifolio.aspx"><span class="glyphicon glyphicon-book"> Portifólio</span></a></li>
                        <li class="menu"><a href="servicos.aspx"><span class="glyphicon glyphicon-wrench"> Serviços</span></a></li>
                        <li class="menu"><a href="contato.aspx"><span class="glyphicon glyphicon-pencil"> Contato</span></a></li>
                        <li class="menu"><a href="local.aspx"><span class="glyphicon glyphicon-map-marker"> Local</span></a></li>
                    </ul> 
                </form>
                </div>
        </div>
    </nav>


Ja ate fiz este exemplo e deu certo agora nao sei o que esta dando erro.

Grato.
Celiol.

Celiol.

Responder

Post mais votado

16/01/2015

Boa Noite.

Colocar as Tags script do jquery antes das tags do bootstrap. Ai Funciona.

Ficando.


<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" type="text/css" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />

<%--Jquerys--%>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jqueryCicle.js" type="text/javascript"></script>

<%--JavaScripts--%>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/marcadagua.js" type="text/javascript"></script>

Eduardo Martins

Eduardo Martins
Responder

Mais Posts

28/10/2014

Joel Rodrigues

Você está tentando fazer um drop-down? Se for, aí só está a <ul> principal, falta a do drop-down como sublista:
<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
Responder

28/10/2014

Celiol.

Então acho que é mais ou menos isso pois ele funciona como um dorpDown é aquela caixa que aparece quando a tela e de um Smartphone um ícone com os 3 riscos que representa o menu porem o meu quando clico nela não abre o menu.


Postei uma foto do botão navBar que não funciona, não sei se tem alguma configuração com asp pois em html fiz do mesmo jeito e funciona legal.
Responder

28/10/2014

Joel Rodrigues

Ah, entendi. Não é drop-down não.
Você referenciou corretamente o arquivo bootstrap.js?
Responder

29/10/2014

Celiol.

sim pois o site esta responsivo os efeitos da imagem esta funcionando e ate um outro tipo de menu que atribui quando a tela esta maximizada ta tudo certo
tentei colocar um menu dropdown também que poderia ser e resolveria meu problema mas também não deu.

Olha como esta, e ele aparece só o Menu, mas eu clico ele não faz nada.

   <ul class="nav navbar-nav visible-xs navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu</a>
                        <ul class="dropdown-menu" role="menu">
                            <li class="menu"><a href="empresa.aspx"><span class="glyphicon glyphicon-flag"> Empresa</span></a></li>
                            <li class="menu"><a href="produtos.aspx"><span class="glyphicon glyphicon-leaf"> Produtos</span></a></li>
                            <li class="menu"><a href="portifolio.aspx"><span class="glyphicon glyphicon-paperclip"> Portifólio</span></a></li>
                            <li class="menu"><a href="contato.aspx"><span class="glyphicon glyphicon-pencil"> Contato</span></a></li>
                            <li class="menu"><a href="local.aspx"><span class="glyphicon glyphicon-map-marker"> Local</span></a></li>  
                        </ul>
                    </li>
                </ul> 


se assim der certo tambem pode ser nao tem necessidade de ter uma caixinha como a navbar isso sem problemas mas nem assim vai.

Grato Joel.
Responder

16/12/2014

Celiol.

Ola alguém aqui sabe porque esta dando esse problema em meu navBar do bootstrap vi vários exemplos e o meu esta correto porem ele não funciona galera podem ajudar?
Ele ate aparece aquele botão quadrado com as linhas porem quando clico ele não faz nada e era pra abrir meu menu para o usuário navegar.
Responder

06/01/2015

Celiol.

Galera estou com este problema ainda mas agora estou terminando uma loja virtual e tenho que resolver este problema eu tentei fazer mas ainda nao acontece nada no evendo do botao ele nao abre o menu. Alguem sabe o que pode ser de errado em meu codigo? Joel tem ideia cara o que é eu achei que era por que trabalho com asp, mas criei tudo em html e mesmo assim ta com erro ainda.

Segue os codigo e a imagem do problema que estou.

Referencia do bootstrap no projeto

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" type="text/css" />
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />

     <%--JavaScripts--%>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>


Aqui o codigo de minha navbar que esta dando erro galera, ele esta ate aparecendo o botao porem quando clico nao faz nada nao realiza o deslocamento do menu.

Aqui é a imagem de como aparece.[img]http://arquivo.devmedia.com.br/forum/imagem/335183-20150106-012735.png[/img]
Responder

12/01/2015

Rodrigo Abreu

Já tentou usar o F12 do Chrome e ir até a aba console pra ver se tem algum erro de javascript?
Responder

12/01/2015

Celiol.

sim cara eu fiz isso e ele mostra um erro la sim mas nao sei o que é. o Erro que ele mostra é este...

     Uncaught Error: Bootstrap's JavaScript requires jQuery                                                                                           bootstrap.js:7

     Uncaught Error: Bootstrap's JavaScript requires jQuery                                                                                           bootstrap.min.js:6 

     Uncaught Error: Bootstrap's JavaScript requires jQuery                                                                                           marcadagua.js:2 

     [cycle2] --c2 init--                                                                                                                                                       jqueryCicle.js:6 

      
      index.aspx:205 GET http://localhost:2656/js/jquery.cycle2.js.map 404 (Not Found)


Olha so cara ele eta dando esses erros porem na minha master page tenho todos esses arquivos declarado veja:

     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" type="text/css" />
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />

    <%--JavaScripts--%>
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/marcadagua.js" type="text/javascript"></script>
    
    <%--Jquerys--%>
    <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="js/jqueryCicle.js" type="text/javascript"></script>



O que tenho que fazer pra resolver?
Responder

16/01/2015

Celiol.

poxa cara valeu resolvel mesmo porque acontece isso?
Responder

16/01/2015

Celiol.

O Malherbi me da uma ajuda cara eu fiz o que voce pediu mas agora nao sei se foi por conta de trocar apenas a ordem mas eu tenho uns alerts no me site, e uso aquele dismiss do bootstrap, porem eu executo o fechamento deles com JS mas agora nao esta funcionando esta assim veja se pode me ajudar?

Bem aqui meu codigo html onde tenho o alert:
   <asp:Panel ID="pnlError" runat="server" class="col-xs-10 col-xs-offset-1 alert alert-danger">
            <strong><asp:Label ID="lblError" runat="server" CssClass="text-center text-danger"></asp:Label></strong>
            <a class="close" data-dismiss="pnlError"><span class="glyphicon glyphicon-remove-circle iconError"></span></a>
        </asp:Panel>


E aqui o JS que é pra fechar quando o usuario clicar no icone (X) ai ele fecha o alert. Mas nao sei o que esta errado, ele aparece quando da o erro mas nao fecha quando clico no (X).

Grato Miller.
Responder

25/11/2016

Lucas Soares

Oi pessoal tudo bem ?

Estou com o mesmo erro no evendo do botao ele nao abre o menu, Ao consultar o console no F12 no chrome da essa informação.

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://err.freewebhostingarea.com/not-found.html".
(index):21 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://err.freewebhostingarea.com/not-found.html".
(index):20 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://err.freewebhostingarea.com/not-found.html".
(index):82 Resource interpreted as Document but transferred with MIME type video/mp4: "http://brunoelicker.orgfree.com/video/bruno_video.mp4".
not-found.html:1 Uncaught SyntaxError: Unexpected token <


E o codigo está assim...

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


 <title>Bruno Cunha Elicker</title>
    <link rel="icon" href="imagens/cropped-logo512.png">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

    <!-- bootstrap - link cdn -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- Bootstrap -->

    <link href="estilo.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>


Me ajudem por favor.
Responder

27/11/2017

Joel Fragoso

Olá,

Eu estava com este mesmo problema no meu projeto. Tudo que tive que fazer foi incluir mais um arquivo como mostra na configuração do Bootstrap.

A linha é esta aqui:
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

Aqui segue a ordem. qualquer dúvida é só acessar a documentação do Bootstrap.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Abraço.
Responder

07/06/2020

Thiago Ferreira

Estou com um problema semelhante, o meu toggle navigation só aparece quando dou um F12 e deixo menor a tela, não entendi o porquê.

assim está o meu código:
.
.
.
<link href="<?php echo BASEURL; ?>assets/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



<link href="<?php echo BASEURL; ?>assets/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Tokyo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="<?php echo BASEURL; ?>assets/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style> body {
padding-top: 50px;
padding-bottom: 20px;
}

.mesmo-tamanho {
width: 95px;
white-space: normal;
} </style>
<link rel="stylesheet" href="<?php echo BASEURL; ?>assets/css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
</head>

.
.
.
Responder

07/06/2020

Thiago Ferreira

Estou com um problema semelhante, o meu toggle navigation só aparece quando dou um F12 e deixo menor a tela, não entendi o porquê.

assim está o meu código:
.
.
.
<link href="<?php echo BASEURL; ?>assets/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



<link href="<?php echo BASEURL; ?>assets/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Tokyo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="<?php echo BASEURL; ?>assets/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style> body {
padding-top: 50px;
padding-bottom: 20px;
}

.mesmo-tamanho {
width: 95px;
white-space: normal;
} </style>
<link rel="stylesheet" href="<?php echo BASEURL; ?>assets/css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
</head>

.
.
.


Analisando melhor descobri que ao clicar no menu e abrir novamente a tela ao tamanho normal as opções ficam fixadas e não desaparecem tal como acontece se o menu estiver fechado. Mas ainda aguardo ajuda para solucionar.
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar