Search the Community
Showing results for tags 'navbar'.
Found 9 results
-
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>
-
Estou estudando html e css e estou com um erro ao criar o navbar! me ajudem!
-
css [HELP] Conteúdo não vai para a direita quando a barra de navegação está aberta
ShadowDLL posted a topic in HTML e CSS
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! -
Menu Toggle navigation navbar - Apresentando erro quando o site é aberto por smartphone
Bruno Godinho posted a topic in HTML e CSS
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á! -
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.
-
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
-
<!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.
-
Como usar duas classes navbar-right na mesma página?
Camilla Fonseca Setuba posted a topic in HTML e CSS
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. -
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.
.thumb.jpg.6d2448400c07192c7587b7e6a08fa29a.jpg)
