Quando eu clico no menu como ensinado na aula , ele abre e fecha rapidinho. O menu fica como se estivesse aberto mas os botões não aparece. Eu queria que ele permanecesse aberto (assim como no video). Já verifiquei o código e ainda não acho erro
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Quando eu clico no menu como ensinado na aula , ele abre e fecha rapidinho. O menu fica como se estivesse aberto mas os botões não aparece. Eu queria que ele permanecesse aberto (assim como no video). Já verifiquei o código e ainda não acho erro
Como assim abre e fecha rápido? Poderia explicar melhor sua dúvida? Manda teu código pra gente.
Vou lhe enviar o códido do menu. Mas é o seguinte:
Quando eu estou pelo celular e clico no menu, as opções aparecem e somem rapido (como se eu clicasse pra abrir e fechar em 1 segundo)...
O menu está abrindo "preso" em uma div, ao inves de abrir na pagina...
Copie este codigo e olha no editor de texto para ver se acha...
<nav id="main-navigation" role="navigation" class="navbar navbar-fixed-top navbar-standard">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse"><i class="fa fa-align-justify fa-lg"></i></button><a href="#" class="navbar-brand"><img src="img/logo.png" alt="" class="logo-white"><img src="img/logo.png" alt="" class="logo-dark"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right service-nav">
<li><a id="dropdownMenuLogin" href="#" data-toggle="dropdown" class="upper dropdown-toggle">Login</a>
<div aria-labelledby="dropdownMenuLogin" class="dropdown-menu widget-box">
<!--FORMULARIO DE LOGIN -->
<form>
<div class="form-group">
<label class="sr-only">Username or Email</label>
<input type="text" value="" placeholder="Username or Email" name="" class="form-control input-lg">
</div>
<div class="form-group">
<label class="sr-only">Password</label>
<input type="password" value="" placeholder="Password" name="" class="form-control input-lg">
</div>
<div class="form-inline form-group">
<button type="button" class="btn btn-primary btn-xs">Login</button>
<div class="checkbox">
<label>
<input type="checkbox"><small> Remember me</small>
</label>
</div>
</div><a href="#"><small>Lost your Password?</small></a>
</form>
<!-- FIM DO FORMULARIO DE LOGIN -->
</div>
</li>
<li><a id="dropdownMenuCart" href="#" data-toggle="dropdown" class="dropdown-toggle"><i class="fa fa-shopping-cart fa-lg"></i> <span class="badge">2</span></a>
<div aria-labelledby="dropdownMenuCart" class="dropdown-menu widget-box">
<div class="shopping_cart_dropdown">
<ul class="cart_list product_list_widget">
<li><a href="#" class="delete"><i class="fa fa-close"></i></a><a href="#"><img alt="" src="img/products/3.jpg"><span>New Peace Baja</span></a>
<h5 class="quantity">45.00</h5>
</li>
<li><a href="#" class="delete"><i class="fa fa-close"></i></a><a href="#"><img alt="" src="img/products/5.jpg"><span>Sunny Tank Selected</span></a>
<h5 class="quantity">25.00</h5>
</li>
</ul>
<div class="total">
<h6>Subtotal</h6><span>$70.00</span>
</div>
<div class="action-button"><a href="shop-cart.html" class="btn btn-dark btn-bordered btn-xs upper">View Cart</a><a href="shop-checkout.html" class="btn btn-primary btn-xs upper">Checkout</a></div>
</div>
</div>
</li>
</ul>
<button type="button" class="navbar-toggle"><i class="fa fa-close fa-lg"></i></button>
<ul class="nav yamm navbar-nav navbar-left main-nav">
<!-- istanzio un id univoco-->
<li class="dropdown"><a href="#" title="Home" data-toggle="dropdown" data-hover="dropdown" id="menu_item_Home" data-ref="#" class="dropdown-toggle">Home<span class="caret"></span></a>
<ul aria-labelledby="menu_item_Home" class="dropdown-menu">
<!-- istanzio un id univoco-->
<li><a href="index.html" title="Single page" data-ref="index">Single page</a></li>
<!-- istanzio un id univoco-->
<li><a href="home-1.html" title="Multi page - Corporate Version" data-ref="home-1">Multi page - Corporate Version</a></li>
<!-- istanzio un id univoco-->
<li><a href="home-2.html" title="Multi page - Blog Version" data-ref="home-2">Multi page - Blog Version</a></li>
<!-- istanzio un id univoco-->
<li><a href="home-3.html" title="Multi page - Shop Version" data-ref="home-3">Multi page - Shop Version</a></li>
</ul>
</li>
<!-- istanzio un id univoco-->
<li class="dropdown"><a href="#" title="Portfolio" data-toggle="dropdown" data-hover="dropdown" id="menu_item_Portfolio" data-ref="#" class="dropdown-toggle">Portfolio<span class="caret"></span></a>
<ul aria-labelledby="menu_item_Portfolio" class="dropdown-menu">
<!-- istanzio un id univoco-->
<li class="dropdown-submenu"><a href="#" title="Portfolio" id="menu_item_Portfolio1">Portfolio</a>
<ul aria-labelledby="menu_item_Portfolio1" class="dropdown-menu">
<!-- istanzio un id univoco-->
<li><a href="portfolio.html" title="Masonry" data-ref="portfolio">Masonry</a></li>
<!-- istanzio un id univoco-->
<li><a href="portfolio-2.html" title="Grid (no spacing)" data-ref="portfolio-2">Grid (no spacing)</a></li>
<!-- istanzio un id univoco-->
<li><a href="portfolio-3.html" title="Grid (with spacing)" data-ref="portfolio-3">Grid (with spacing)</a></li>
<!-- istanzio un id univoco-->
<li><a href="portfolio-4.html" title="Full width" data-ref="portfolio-4">Full width</a></li>
</ul>
</li>
<!-- istanzio un id univoco-->
<li class="dropdown-submenu"><a href="#" title="Portfolio detail" id="menu_item_Portfoliodetail">Portfolio detail</a>
<ul aria-labelledby="menu_item_Portfoliodetail" class="dropdown-menu">
<!-- istanzio un id univoco-->
<li><a href="portfolio-detail.html" title="Portfolio detail" data-ref="portfolio-detail">Portfolio detail</a></li>
<!-- istanzio un id univoco-->
<li><a href="portfolio-detail-sidebar.html" title="Portfolio detail with sidebar" data-ref="portfolio-detail-sidebar">Portfolio detail with sidebar</a></li>
<!-- istanzio un id univoco-->
<li><a href="portfolio-detail-sidebar-2.html" title="Portfolio detail with sidebar 2" data-ref="portfolio-detail-sidebar-2">Portfolio detail with sidebar 2</a></li>
</ul>
</li>
</ul>
</li>
<!-- istanzio un id univoco-->
</ul>
</div>
</div>
</nav>
Precisa do teu .css também. se não não da pra ver o menu rs
Segue o Css:
/**
* Project: TT Menu - Vertical Horizontal Bootstrap Mega Menu
* Author: Trending Templates Team
*
* Dependencies: Bootstrap's mega menu plugin
* A professional Bootstrap mega menu plugin with tons of options.
*/
@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
/* NO NEED TO ADD */
.hero {
margin-bottom:20px;
position: relative;
}
/*.container-dir{
margin-left: 20px !important;
}
*/
/* MENU VERTICAL */
#vertical .navbar-brand {
width: 240px;
}
#vertical .ttmenu-full.open {
max-width: 100%;
width: 800px !important;
position: absolute;
}
#vertical .navbar-default,
#vertical .navbar-default .nav,
#vertical .navbar-default .collapse,
#vertical .navbar-default .dropup,
#vertical .navbar-default .dropdown {
position: static;
width: 240px !important;
left:0;
}
#vertical .navbar-collapse {
padding: 0
}
#vertical .navbar-default .navbar-nav li .vertical-menu {
opacity: 1;
position: absolute;
left: 240px !important;
right: 0 !important;
top:auto;
margin-top: -65px !important;
max-width: 900px;
padding:0;
}
#vertical .navbar-default .navbar-nav li .vertical-dropdown-menu {
opacity: 1;
position: absolute;
left: 240px !important;
right: 0 !important;
top:auto;
margin-top: -65px !important;
max-width: 240px;
padding:0;
}
#vertical .navbar-default .navbar-nav li .dropdown {
width: 240px !important
}
#vertical .navbar-default .navbar-nav li ul {
width: 100% !important
}
#vertical .dropdown-menu,
#vertical .navbar-default .ttmenu-content {
padding:20px;
}
.navbar{
min-height: 70px !important;
}
#vertical .nav-pills {
max-width: 200px;
}
#vertical .dropme:after{
content: "\f105";
color:#fff;
position: absolute;
right: 20px;
padding-left: 5px;
font-family: 'FontAwesome';
}
/* MENU DEFAULT */
.ttmenu .navbar-default {
border:0;
width: 100% !important;
border-radius: 0;
}
.ttmenu .navbar-default .dropdown-menu {
background: rgb(255,255,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */
box-shadow:none !important;
border:0;
}
.ttmenu .navbar-default .dropdown-menu,
.ttmenu .navbar-default .dropdown-menu li a {
color:#282828;
list-style:none;
background-color: transparent !important;
}
.white-style .navbar-brand i {
color:#ffffff !important;
}
.ttmenu .navbar-default .navbar-toggle span {
color:#fff !important;
background:#fff !important;
}
.ttmenu .navbar-default .navbar-toggle {
border-color:#111;
color:#fff !important;
margin-top:15px;
}
.ttmenu .navbar ul {
padding-left:0;
list-style:none;
}
.ttmenu .navbar-brand {
color: #fff !important;
float: left;
font-size: 20px;
height:65px;
background:#303030;
line-height: 38px;
position: relative;
text-align: center;
top: 0;
width:65px;
}
.ttmenu .navbar-collapse {
border-bottom: 0 !important;
}
.ttmenu .navbar-default .navbar-nav > li > .dropdown-menu {
margin-top:0;
}
.ttmenu .navbar-default .nav,
.ttmenu .navbar-default .collapse,
.ttmenu .navbar-default .dropup,
.ttmenu .navbar-default .dropdown {
position: static;
}
.ttmenu .navbar-default .container {
position: relative;
}
.ttmenu .navbar-default .dropdown-menu {
left: auto;
background-color: #ffffff !important
}
.ttmenu-content .box li,
.ttmenu .navbar-default .dropdown-menu li a {
text-decoration:none !important;
}
.ttmenu .navbar-default .dropdown-menu,
.ttmenu-content .dropdown-menu {
padding:0 !important
}
.navbar-default .navbar-nav > li > a {
padding-bottom: 25px;
padding-top: 2px;
font-family: "Open Sans",Arial,sans-serif;
font-size: 13px;
height:39px;
font-style: normal;
color:#fff !important;
font-weight: 700;
text-transform: uppercase;
}
.navbar-nav > li > a {
border-top: 0px solid transparent !important;
}
.navbar-default .dropdown-menu li a {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
color: #282828;
font-size: 13px;
font-weight: 400;
font-family: "Open Sans",Arial,sans-serif;
padding: 13px 10px 13px 15px !important;
position: relative;
text-decoration:none;
text-transform: none;
}
.ttmenu .navbar-default li .widget a {
padding:0 !important;
}
.ttmenu-content .box li a{
color: #282828;
font-size: 13px;
border-bottom:none;
border-bottom:0 !important;
font-weight: 400;
font-family: "Open Sans",Arial,sans-serif;
padding: 14px 30px 12px 0 !important;
position: relative;
text-decoration:none;
text-transform: none;
}
.ttmenu .dropdown-menu,
.ttmenu .navbar-default .ttmenu-content {
padding:30px 30px;
}
.ttmenu .navbar-default .ttmenu-full .dropdown-menu {
left: 0;
right: 0;
}
.ttmenu .nav li span.label {
color:#fff !important;
margin-left: 5px;
margin-top: 2px !important;
padding: 5px 10px;
}
.ttmenu .navbar-default .navbar-nav > .active > a,
.ttmenu .navbar-default .navbar-nav > .active > a:hover,
.ttmenu .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
}
.ttmenu-content .widget {
padding:0;
margin:0;
}
.ttmenu-content,
.ttmenu-content .widget,
.ttmenu-content .widget .thumb {
position: relative;
}
.ttmenu-content .widget .title h4 {
font-size:14px;
text-transform: uppercase;
font-weight: 400;
}
.ttmenu-content .box li {
border-bottom: 1px solid #ededed;
position: relative;
padding:10px 10px 10px 0;
}
.ttmenu-content .box li i {
right:0;
clear: both;
top:10px;
display:block;
position:absolute;
}
.dropme:after{
content: "\f107";
color:#fff;
padding-left: 5px;
font-family: 'FontAwesome';
}
.dropme-left:after{
content: "\f105";
color:#1a1a1a;
font-family: 'FontAwesome';
display:block;
right:10px;
width:0;
position:absolute;
height:0;
top:13px;
margin-top:0;
margin-right:10px;
}
.navbar-default .dropdown-menu li:last-child,
.ttmenu-content .box li:last-child {
border-bottom:0 solid #fff;
}
.box p {
color:#1a1a1a;
font-weight: 400;
padding-top:10px;
font-size:13px;
}
.box h4 {
color:#1a1a1a;
font-weight: bold;
font-size:14px;
}
.box ul li span {
float:right;
margin-top:4px;
}
/* MENU SEARCH */
.searchbox {
bottom: 0;
float: right;
line-height: 65px;
min-width: 65px;
overflow: hidden;
position: relative;
background: #222;
right: 0;
width:0;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
-ms-transition: width 0.3s;
-o-transition: width 0.3s;
transition: width 0.3s;
}
.searchbox-input{
top:0;
right:0;
border:0;
outline:0;
background:#333;
width:100%;
line-height: 65px;
height:65px;
margin:0;
padding:1px 65px 0px 20px;
font-size:12px;
}
.searchbox-icon,
.searchbox-submit{
width:65px;
height:65px;
display:block;
position:absolute;
top:0;
bottom:0;
font-size:18px;
right:0;
padding:0;
margin:0;
border:0;
outline:0;
line-height:65px;
text-align:center;
cursor:pointer;
color:#fff;
background:#000;
}
.ttmenu input[type="search"] {
color:#fff;
}
.searchbox-open{
width:100%;
}
/* MENU FORM */
.ttmenu .form-control {
background-color: #f9f9f9;
border: 1px solid #f5f5f5;
border-radius: 0;
box-shadow: none;
font-size:12px;
height: 35px;
margin-bottom: 10px;
}
.ttmenu textarea {
height: 140px !important
}
/* MENU IMAGE HOVER */
.ttmenu .entry {
position:relative;
overflow:hidden;
margin-bottom:0;
}
.ttmenu .entry img {
width:100%;
}
.ttmenu .magnifier {
background:rgba(0,0,0,.9) url(images/magnifier.png) no-repeat center;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
.ttmenu .entry:hover .magnifier {
zoom: 1;
filter: alpha(opacity=100);
opacity: 1;
}
.ttmenu .menu-image {
margin-bottom: 30px;
}
#myCarousel img {
width: 100%;
}
/* MENU TABBED */
.nav-pills {
margin-top: 6px;
}
.nav-pills > li {
float: none;
margin-top:0;
cursor: pointer;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.nav-pills > li > a {
border-radius: 0;
cursor: pointer !important;
border:0 !important;
position: relative;
font-weight: bold !important;
text-transform: uppercase !important;
margin-right: 0;
}
.nav-pills > li > a:after{
content: "\f105";
color:#1a1a1a;
font-family: 'FontAwesome';
display:block;
right:10px;
width:0;
position:absolute;
height:0;
top:13px;
margin-top:0;
margin-right:10px;
}
/* MENU GRADIENT */
.demo_changer .demo-icon,
.menu-color-gradient .btn-primary,
.menu-color-gradient .label-danger,
.menu-color-gradient .navbar-brand,
.menu-color-gradient .navbar-default .navbar-nav > .open > a,
.menu-color-gradient .navbar-default .navbar-nav > .open > a:hover,
.menu-color-gradient .navbar-default .navbar-nav > .open > a:focus,
.menu-color-gradient .navbar-default .navbar-nav > li > a:focus,
.menu-color-gradient .navbar-default .navbar-nav > li > a:active,
.menu-color-gradient .navbar-default .navbar-nav > li > a.active,
.menu-color-gradient .navbar-default .navbar-nav > li > a:hover {
background: #a90329; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5MDMyOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzhmMDIyMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZDAwMTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-8 */
opacity:1;
}
.menu-color-gradient .navbar-default .navbar-toggle:hover,
.menu-color-gradient .coldesc:hover {
background:#a90329;
color:#fff !important;
}
.menu-color-gradient .form-control:focus {
border-color: #a90329;
outline: 0;
box-shadow:none;
}
.menu-color-gradient .btn-primary {
border-radius:0;
font-size:13px;
background-color: #a90329 !important;
border-color: #a90329 !important;
color: #fff !important;
}
.menu-color-gradient .box ul li:hover .fa {
color: #a90329 !important;
}
.menu-color-gradient .magnifier {
background-color:rgba(169,3,41,.9);
}
/* DARK STYLE */
.dark-style .coldesc {
background:#1abc9c;
color:#1abc9c;
margin-bottom: 10px;
text-align:center;
}
.dark-style .navbar-default .ttmenu-content {
border-radius: 0;
}
.dark-style .dropdown-menu {
background-color:#ffffff !important;
}
.dark-style .navbar-default .dropdown-menu li a,
.dark-style .ttmenu-content .box li a,
.dark-style .ttmenu-content .box li:before {
color:#1a1a1a !important;
}
.dark-style .ttmenu-content .box li a:hover,
.dark-style .ttmenu-content .box li a:focus {
background:none !important
}
.dark-style .ttmenu-content .box li {
border-bottom-color: rgba(0, 0, 0, 0.1);
}
.dark-style .navbar-default .dropdown-menu li a:hover,
.dark-style .navbar-default .dropdown-menu li a:focus {
background:#ffffff;
}
.dark-style .form-control,
.dark-style .searchbox-icon, .searchbox-submit,
.dark-style .navbar-default {
background: #1abc9c; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
}
/* RESPONSIVE */
@media (max-width: 767px) {
#vertical .navbar-brand {
width: 60px;
}
#vertical .ttmenu-full.open {
max-width: 100%;
width: 100% !important;
position: relative;
}
#vertical .navbar-default,
#vertical .navbar-default .nav,
#vertical .navbar-default .collapse,
#vertical .navbar-default .dropup,
#vertical .navbar-default .dropdown {
position: static;
width: 100% !important;
left:0;
}
#vertical .navbar-collapse {
padding: 0
}
#vertical .navbar-default .navbar-nav li .vertical-menu {
opacity: 1;
position: static;
left: 100% !important;
right: 100% !important;
top:auto;
margin-top: 0 !important;
max-width: 100%;
padding:0;
}
#vertical .navbar-default .navbar-nav li .vertical-dropdown-menu {
opacity: 1;
position: static;
left: 100% !important;
right: 100% !important;
top:auto;
margin-top: 0 !important;
max-width: 100%;
padding:0;
}
#vertical .navbar-collapse {
padding:0 0 0 20px;
}
#vertical .dropdown-menu,
#vertical .navbar-default .ttmenu-content {
padding:20px;
}
#vertical .nav-pills {
max-width: 200px;
}
#vertical .dropme:after{
content: "\f107";
color:#fff;
position: absolute;
right: 20px;
padding-left: 5px;
font-family: 'FontAwesome';
}
.nav-pills > li > a::after,
.dropme-left:after{
content: "\f107";
}
.ttmenu .nav-pills,
#vertical .nav-pills {
width: 100%;
padding:0;
max-width: 100%;
margin-bottom: 20px;
}
}
/* SUB MENU STYLE */
.ttmenu .dropdown-submenu {
position:relative;
}
.ttmenu .dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:0;
margin-left:0;
border-radius:0;
}
.ttmenu .dropdown-submenu:hover>.dropdown-menu {
display:block;
}
.ttmenu .dropdown-submenu.pull-left {
float:none;
}
.ttmenu .dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
.ttmenu .open > .dropdown-menu {
animation-name: slidenavAnimation;
animation-duration:.5s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-name: slidenavAnimation;
-webkit-animation-duration:.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: slidenavAnimation;
-moz-animation-duration:.5s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: forwards;
}
@keyframes slidenavAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes slidenavAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
Você pode me mandar todo o seu projeto via we transfer? (agencianiko@hotmail.com)
Você me mandou o index incompleto, então pra mim não aparece nenhum menu.
Nikolai, perdão. Lhe mando sim. Mas já solucionei o problema. Era as classes do bootstrap, pois eu peguei um menu lateral da internet e coloquei no site e deu conflito, já está solucionado . Mas outro erro persiste.
O erro persistente é o seguinte:
O menu lateral está de boa, mas na versão mobile dele não aparece os botões (só aparece o menu sem nada)