Jump to content

Search the Community

Showing results for tags 'navbar'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Web Development
    • HTML e CSS
    • Javascript
    • PHP
    • Ruby
    • Python
    • Java
    • .NET
    • Docker, Kubernets and other environments
    • WordPress
    • Mobile
    • Agile
    • Desenvolvimento de Games
    • Banco de Dados
    • Design and UX
    • Algoritmos & Outras Tecnologias
  • Entretenimento e uso pessoal
    • Segurança & Malwares
    • Geral
    • iMasters's pub

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 14 results

  1. opl12

    Nav Bar com DropDown em html

    Podem me ajudar? Preciso colocar um menu "DropDown" na "Nav Bar"... mas tô me quebrando hahahaha o que estou fazendo de errado? <!DOCTYPE html> <html lang="pt-br"> <head> <!-- Última versão CSS compilada e minificada --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Tema opcional --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Última versão JavaScript compilada e minificada --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>::: TESTE :::</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <!--<img width="80px" height="30" src="#" title="seu texto" vspace="10px"/>--> </div> <ul class="nav navbar-nav"> <li class="nav-item"><a class="nav-link" href="#" target="a_blank">HOME</a></li> <li class="nav-link"><a href="#" target="a_blank">LINK A</a></li> <li class="nav-link"><a href="#" target="a_blank">LINK B</a></li> <li class="nav-link"><a href="#">LINK C</a></li> <li><a href="#">LINK D</a></li> <li><a href="#">LINK E</a></li> <li><a href="#">LINK F</a></li> <li><a href="#" target="a_blank">LINK G</a></li> <div class="dropdown"> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> User</a></li> <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true" <img title="Deslogar"/> </span>Sair</a></li> </ul> </div> </nav> </body> </html>
  2. j3ffyog

    Erro no Navbar

    Estou estudando html e css e estou com um erro ao criar o navbar! me ajudem!
  3. Olá pessoas, Estou desenvolvendo um painel responsivo, porém, durante os testes do mesmo encontrei um erro ao abrir o 'navbar', sendo assim, gostaria de pedir uma ajudinha de vocês se possível... Bem, vamos lá! [ Qual o Problema? ] Ao abrir o 'navbar' na resolução para dispositivos móveis, o conteúdo presente em <div class="one-content"> deveria ser 'jogado' para a direita sem redimensionar a largura dos itens conforme o 'navbar' é apresentado na tela, porém, o mesmo está redimensionando a largura dos itens para ajustar-se na tela sem os 'jogar' para a direita... Vale a pena ressaltar que o conteúdo só deverá ficar com uma parte "oculta" nas resoluções de dispositivos móveis. [ Imagem do Erro ] [ Imagem da Solução ] [ Código com Erro ] HTML <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="one-wrapper"> <div class="one-sidebar"></div> <div class="one-content"> <div class="one-navbar"> <div class="toggle"> <a class="toggle-btn"></a> </div> </div> <div class="container"> <form class="form-inline"> <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label> <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Remember my preference</span> </label> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </div> CSS @import url('https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css'); .one-wrapper { align-items: stretch; display: flex; width: 100%; } .one-sidebar { background-color: #333c4e; transition: all 0.2s; min-width: 250px; max-width: 250px; color: #ffffff; } .one-sidebar.active { margin-left: -250px; } .one-content { background-color: #f0f1f3; align-items: stretch; transition: all 0.2s; min-height: 100vh; color: #666666; width: 100%; } .one-navbar { border-bottom: 1px solid #cccccc; background-color: #ffffff; padding: 10px; width: 100%; } .one-navbar .toggle { padding: 20px; } .one-navbar .toggle a { background: #000000; padding: 20px; } JS $(function(){ $ ('.toggle-btn').click (function(){ $('.one-sidebar').toggleClass('active'); }); if ($(window).width() < 1000) { $('.one-sidebar').toggleClass('active'); } }); Desde já, agradeço!
  4. Bom dia! Alguém pode me ajudar a ajudar um amigo? Eu estou criando uma pagina para um amigo; o site é gpchaveiro.com.br. Mas quando abro pelo computador ele apesar de simples, está amigável; mas quando abro de qualquer smartphone, a parte superior está com um espaçamento fora do comum, alterando o layout, cortando parte de um slide que vem logo abaixo e, o pior é que quando aperto o menu ele abre as opções, eu escolho, e ele continua na tela, ele não recua. No HTML (index.html): <!-- ==================================================== header section --> <header class="top-header"> <div class="container"> <div class="row"> <div class="col-xs-5 header-logo"> <br> <a href="index.html"><img src="img/logo.png" alt="" class="img-responsive logo"></a> </div> <div class="col-md-7"> <nav class="navbar navbar-default"> <div class="container-fluid nav-bar"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a class="menu active" href="#home" >Home</a></li> <li><a class="menu" href="#servicos">Serviços</a></li> <li><a class="menu" href="#localizacao">Localização </a></li> <li><a class="menu" href="#quemsomos">Quem Somos</a></li> <li><a class="menu" href="#faleconosco"> Fale Conosco</a></li> </ul> </div><!-- /navbar-collapse --> </div><!-- / .container-fluid --> </nav> </div> </div> </div> </header> <!-- end of header area --> NO CSS (style.css) .navbar-default { background-color: transparent; border-color: transparent; margin-bottom: 0; margin-top: 8px; transition: all .5s ease 0s; -webkit-transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; -o-transition: all .5s ease 0s; -ms-transition: all .5s ease 0s; } .nav-bar { margin-top: 29px; } .navbar-toggle span { color: #fff; } ul.nav { margin: 0; padding: 0; } .navbar-default .navbar-nav>li>a { font-size: 24px; color: #737373; text-transform: uppercase; transition: all .7s ease 0s; -webkit-transition: all .7s ease 0s; -moz-transition: all .7s ease 0s; -o-transition: all .7s ease 0s; -ms-transition: all .7s ease 0s; padding: 14px 15px; font-weight: bold; } .navbar-default .navbar-nav>li>a:hover { color: #42b3e5; } .navbar-default .navbar-toggle .icon-bar { background-color: #000; } li a.active { color: #42b3e5 !important; } .navbar-default .navbar-toggle { border-color: #fff; margin-top: 4px; } Existem dois sites muito no estilo desse que fiz, e o deles funcionam perfeitamente essa ação via smartphone, não fica com o espaço que o meu fica e uma vez escolhido o link no menu, ele recua: chaveiro24horasajato.com.br e chaveiros24horas.com.br Alguem consegue me ajudar, por gentileza?! Agradecendo desde já!
  5. Olá Colegas.... Tenho o código abaixo que funciona perfeitamente, fiz algumas modificações no CSS e também no JQUERY, segue abaixo... O PROBLEMA é que ao dar um refresh na página, F5 no brownser, ele como DEFAULT se perde o background, ficando TRANSPARENT. 1) Que é o modo que ele deve começar; 2) Mas como ele muda após se o window for maior >=20, no jquery; 3) Ao dar refresh, dependendo do lugar da página, ele deveria ficar o mesmo, mas fica sempre transparente; CODIGO HTML <nav class="navbar navbar-light navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_menu" aria-expanded="false"> <span class="fa fa-bars"></span> </button> <a href="http://" class="navbar-brand brand-centered"> <img src="img/logo.png" class="img-responsive"> </a> </div> <div class="collapse navbar-collapse" id="navbar_menu"> <ul class="nav navbar-nav navbar-right"> <li><a href="#mn_empresa">EMPRESA</a></li> <li><a href="#mn_clientes">CLIENTES</a></li> <li><a href="#mn_formulario">CONTATO</a></li> </ul> </div> </div> </nav> CODIGO CSS /* NAVBAR */ .navbar { padding-top: 5px; padding-bottom: 12px; background-color: transparent; margin: 0px; color: #333; transition: all 0.3s; z-index: 9999; -webkit-box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1); -moz-box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1); box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1); } /* NAVBAR - efeito simples dos itens do menu */ .navbar-nav a, .navbar-nav a.active { color: #00224b !important; background-color: transparent; font-size: 15px; font-weight: 600; width: 100%; -moz-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; } .navbar-nav li a:hover, .navbar-nav li.active a { color: #f4511e !important; background-color: white; font-weight: 600; width: 100%; } /* NAVBAR - toggle button */ .navbar-light .navbar-toggle { border: none; border-radius: 40px; width: 40px; height: 40px; font-size: 20px; z-index: 12; background-color: dodgerblue; color: white; cursor: pointer; -moz-transition: all .8s; -o-transition: all .8s; -webkit-transition: all .8s; transition: all .8s; } .navbar-light .navbar-toggle:hover { background-color: #f6761c; border-radius: 40px 0px 40px 40px; color: white; } /* NAVBAR - mudanças jquery */ .navbar-brand.nav_corlogo { height: auto; filter: brightness(0) invert(1) !important; } .navbar-nav.nav_cormenu a, .navbar-nav.nav_cormenu a.active { color: white !important; } .navbar-nav.nav_cormenu li a:hover, .navbar-nav.nav_cormenu li.active a { color: #ff9326 !important; background-color: transparent; } .navbar.nav_sombra { -webkit-box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39); -moz-box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39); box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39); border-bottom: 2px solid rgba(118, 0, 191, 0.56); } .navbar.nav_comprime { padding-top: 10px; padding-bottom: 10px; background: #002a5c; color: white; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); -moz-transition: all .4s; -o-transition: all .4s; -webkit-transition: all .4s; transition: all .4s; } .navbar.nav_slide { background-color: transparent !important; } /* NAVBAR - config do logotipo imagem e logo texto */ .navbar-brand { padding: 4px; position: absolute; font-size: 1.25rem; white-space: nowrap; } .navbar-brand>img { padding: 0px; width: 16%; } .navbar-brand:focus, .navbar-brand:hover { text-decoration: none; color: white } CODIGO JQUERY $(function () { $(window).on('scroll', function () { if ($(this).scrollTop() >= 20) { $('.navbar').addClass('nav_comprime'); $('.navbar').addClass('nav_sombra'); $('.navbar-nav').addClass('nav_cormenu'); $('.navbar-brand').addClass('nav_corlogo'); } else { $('.navbar').removeClass('nav_comprime'); $('.navbar').removeClass('nav_sombra'); $('.navbar-nav').removeClass('nav_cormenu'); $('.navbar-brand').removeClass('nav_corlogo'); } }); $('.navbar a').on('click', function () { if (window.innerWidth <= 768) { $('.navbar-toggle').trigger("click"); } }); //função que troca em resoluções menores o logotipo $(window).resize(function () { if ($(window).width() < 481) { $('#logotipo').attr('src', '../site/img/simbolo.png'); } else { $('#logotipo').attr('src', '../site/img/logo_-_original.png'); } }); $(".navbar a, footer a[href='#wrapper']").on("click", function (event) { event.preventDefault(); var hash = this.hash; $("html, body").animate({ scrollTop: $(hash).offset().top }, 800, function () { window.location.hash = hash; }); }); }); Se conseguirem me dar uma luz, agradeço. Posso estar errando no CSS ou JQUERY. Obrigado.
  6. Raphael Beghelli Ribeiro

    Duvida com Select

    Prezados, Bom Dia! Estou desenvolvendo um site, onde existe um navbar em sua versão desktop. <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#empresa-historico" data-toggle="tab">HISTÓRICO</a></li> <li><a href="#empresa-filosofia" data-toggle="tab">FILOSOFIA</a></li> <li><a href="#empresa-localizacao" data-toggle="tab">LOCALIZAÇÃO</a></li> <li><a href="#empresa-logomarca" data-toggle="tab">LOGOMARCA</a></li> <li><a href="#empresa-equipe" data-toggle="tab">EQUIPE</a></li> <li><a href="#empresa-servicos" data-toggle="tab">SERVIÇOS</a></li> </ul> Na versão mobile, este nav é substituido por Select <select class="empresa-mobile" onchange="window.location.href = this.value;"> <option value="a_empresa.php#empresa-historico" <? if($Pagina == "a_empresa.php#empresa-historico") { echo"selected"; } ?>>HISTÓRICO</option> <option value="a_empresa.php#empresa-filosofia" <? if($Pagina == "a_empresa.php#empresa-filosofia") { echo"selected"; } ?>>FILOSOFIA</option> <option value="a_empresa.php#empresa-localizacao" <? if($Pagina == "a_empresa.php#empresa-localizacao") { echo"selected"; } ?>>LOCALIZAÇÃO</option> <option value="a_empresa.php#empresa-logomarca" <? if($Pagina == "a_empresa.php#empresa-logomarca") { echo"selected"; } ?>>LOGOMARCA</option> <option value="a_empresa.php#empresa-equipe" <? if($Pagina == "a_empresa.php#empresa-equipe") { echo"selected"; } ?>>EQUIPE</option> <option value="a_empresa.php#empresa-servicos" <? if($Pagina == "a_empresa.php#empresa-servicos") { echo"selected"; } ?>>SERVIÇOS</option> </select> o problema é: Quando faço a escolha do item, na versão mobile, ele atualiza o endereço da pagina no navegador e não abre na pagina. Algo de errado no código? alguma ajuda? Alguém poderia me ajudar com algum script que faz o reload da pagina após selecionar algum option ou alguma outra maneira do conteudo da div escolhida abra no mobile?? obrigado
  7. <!DOCTYPE html> <html lang="PT-BR"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <link href="navbar-fixed-top.css" rel="stylesheet"> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="../../assets/js/ie-emulation-modes-warning.js"></script> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> } <div class="sticky-top"> <style> <style> </style> <div class="container"> <div class="jumbotron jumbotron-fluid bg-white my-0 py-0"> <img class="img-responsive" src="logocerto.png"> <style> .img-responsive{ margin-left:400px; height:300px; } </style> </div> </div> </div> <style> .jumbotron-fluid { background-image: url(pao.jpg); background-size: cover; height: 100%;} </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <nav class="navbar navbar-expand-md navbar-light bg-light mb-3"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="nav navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> BOOKS </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Branding Sutra</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">SERVICES</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ABOUT</a> </li> </ul> </div> </nav> </div> <div class="container-fluid"> <div class="row"> </div> </div> <style> body { background-image: url(pao.jpg); color: white; widht:200px; height:200px; </style> </div> <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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> </body> </html> https://uploaddeimagens.com.br/imagens/menu-png-a8029ad2-e316-40e4-8307-232533848c59 Eu quero deixar desse jeito.
  8. Camilla Fonseca Setuba

    Como usar duas classes navbar-right na mesma página?

    Olá pessoal! Estou criando um layout para um sistema em ASP que trabalha com o conceito de content onde preciso usar duas barras de navegação uma embaixo da outra, seria 'Menu principal e Menu 2. A questão é que preciso usar a classe="navbar-right" nos dois, para que gere o ícone do sanduíche e liste os itens do menu no mobile, mas quando aciono o ícone do menu2 ele abre a lista do menu principal. Se eu remover o Menu Principal o Menu2 funciona, ou seja, os dois estão funcionando perfeitamente. Acho que um esta conflitando com o outro. Segue código, Menu Principal que fica no site.master.aspx <div class="menuprincipal"> <nav class="navbar navbar-default navbar-static-top" style="background-color: #143b78"> <div class="container"> <div class="navbar-header" style="background-color: #143b78";> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" style="background-color: #143b78";><img src="../img/cliente.png" class="logocliente img-responsive"/></a> <div class="title" style="width: 500px; padding-top:4%;padding-left:40%";><h5 class="navbar-text"></div></h5> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right" > <li ><a href="../navbar/" style="color:#fff;">Fale com o </br> </a></li> <li ><a href="../navbar-fixed-top/" style="color:#fff;">Cronômetro</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> </div> Código menu2 que fica na página que herda o menu principal do site.master: <div class="menu2"> <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Início</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Chapas</a></li> <li><a href="#about">Comprovante</a></li> </ul> <ul class="nav navbar-nav navbar-right"> </ul> </div><!--/.nav-collapse --> </div> </nav> </div> Desde já agradeço.
  9. marcelocardoso

    NavBAR deste site, como fazer?

    olá galera. estive baixando um SO, e achei bacana o estilo desta barra, efeito. alguém tem ideia, já fez isso: NAVBAR - com Slide Tentei desmembrar o código, mas ví que está em WORDPRESS, se alguém souber de alguma forma reproduzir simplesmente, apenas com jquery, tem exemplo e gostaria de postar para conhecimento e estudo, agradeço. Obrigado.
  10. Bom dia Estou com problema em um navbar. Ao final do navbar, incluí um navbar-right e dentro deste um dropdown-menu. Ao diminuir a resolução do navegador, a navbar-right "pula para uma nova linha" ao invés de diminuir de tamanho. <nav id="top-nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container-fluid"> ....... <ul class="nav navbar-nav navbar-right"> <li><a href="suporte.php"><i class="glyphicon glyphicon-envelope" alt="Suporte" title="Suporte Técnico"></i><span title="Suporte Técnico"> Suporte </span><span class="badge badge-info" id="sup_nov_mens"></span></a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"><span class="glyphicon glyphicon-user"></span><?php echo " $var_nome"; ?><span class="caret"></span></a> <ul id="g-account-menu" class="dropdown-menu" role="menu"> <li><a href="#">Texto_1: <?php echo" $var_1"?></a></li> <li><a href="#">Texto_2: <?php echo" var_2"?></a></li> <li><a href="#">Texto_3: <?php echo" var_3"?></a></li> <li><a href="form1.php" style="color: blue;">Texto_4</a></li> </ul> </li> <li><a href="form.php?v=lg" target="_top"><i class="icon-lock icon-white"></i> Sair</a></li> </ul> </div><!--/.nav-collapse --> </div><!--/.container --> </nav><!--/.header --> Ao diminuir a resolução, esta navbar-right "cria uma segunda linha" e sobrepõe conteúdo do meu formulário. Se alguém puder me ajudar, agradeço. Utilizo Bootstrap3.
  11. Bom dia, galera Tenho um site feito em Bootstrap e que tem dentro dele alguns anúncios do DoubleClick (Google) e da Criteo. Acontecia alguns problemas que estes banners em resolução baixa (celulares e tablets) estouravam e faziam com que o navbar acompanhasse o tamanho (largura) deste anúncio. Para o DoubleClick, consegui resolver com ad-units - Quando a imagem for muito grande e a resolução baixa, carrega um anúncio de menor tamanho. Já para Criteo, não encontrei solução. Enfim, não é algo específico das empresas; se eu adicionar uma imagem de largura 1000px e abrir no celular, o navbar vai acompanhar o tamanho e esticar conforme imagem anexa. Então como faço para que meu navbar tenha exatamente a largura do dispositivo e ignore caso algum outro componente da página seja maior e estique? Obrigado
  12. Bom dia Galera, estou criando um site e vejo que vou precisar da ajudar de vocês diariamente, agradeço desde já a todos... Eu preciso que, ao clicar no menu, a página seja jogada para baixo e não sobreposta, como faço para resolver isso ? <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">INSTANT</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="#works">Works</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> obrigado abraço
  13. juninhogpe

    Problemas com menu (Bootstrap)

    Bom dia. Estou fazendo um site onde utilizo Bootstrap e meu menu está assim: <!-- Navigation --> <nav class=" navbar-inverse navbar-default" style="z-index:1000000 !important;"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Logo --> <div class="logo"> <a class="navbar-brand" href="index.html"><img src="images/logo.png" class="img-responsive" alt="" /></a> </div> <!-- //Logo --> </div> <div id="navbar" class="navbar-collapse navbar-right collapse"> <ul class="nav navbar-nav navbar-right"> <li><a class="cross-effect" href="index.html">Home</a></li> <li><a class="cross-effect" href="#missao">Quem somos</a></li> <li><a href="produto.html" target="_blank">Produtos</a></li> <li><a class="cross-effect" href="qualidade.html">Qualidade</a></li> <li><a class="cross-effect" href="#contact">Contato</a></li> </ul> </div><!-- //Navbar-Collapse --> </nav> <!-- //Navigation --> Ao passar um link dentro da ul assim: <li><a href="produto.html" target="_blank">Produtos</a></li> O mesmo não direciona para a página. Se eu retirar class="navbar ...", funciona. O que pode estar ocorrendo. Agradeço desde já quem puder me ajudar.
  14. juninhogpe

    Menu (navbar) com Bootstrap

    Bom dia. Pessoal tenho o site www.arpag.com.br com um menu utilizando Bootstrap, no desktop está 100% e quando vou visualizar o site no celular e clico para exibir o menu, o input do campo buscar fica bem para baixo, gerando uma barra de rolagem no menu. Para vocês isso é normal ou tem alguma maneira para que eu possa evitar isso para que o menu apareça todo? Agradeço.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.