0
wenn ich auf das navbar-symbol auf meinem mobilen/tablet klicken öffnet das navabr aber dann geht es weg, aber die navbar denkt immer noch, dass die navbar geöffnet ist, wenn ich auf das navbar-symbol schließe es schließt dann (kann es nicht schließen), aber wenn ich erneut klicke, um es zu öffnen, ist es immer noch dasselbe.bootstrap navbar kollabiert und verschwindet sofort
Ich habe ein gif (Entschuldigung für die niedrige Auflösung) hinzugefügt, um Ihnen zu zeigen, was ich bekomme. GIF
Die Navbar Code:
<div class="navbar-fixed-top">
<div id="menu">
<div class="menu--topbar">
<div class="container">
<div class="menu-topbar--contact">
<ul class="nav navbar-nav">
<li><a style="color:#fff" href="MAILTO:XXXXXXXXXXXXXXXXXXXXX"><i class="fa fa-envelope"></i><span href="mailto:XXXXXXXXXXXXXXXXXXXXX"></span>EMAILXXXXX</a></li>
<li><a style="color:#fff" href="tel:XXXXXXXXXX"><i class="fa fa-phone"></i><span href="tel:XXXXXXXXX"></span> XXXXXXXXX</a></li>
</ul>
</div>
</div>
</div>
<nav id="secondaryMenu" class="navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#secondaryNavbar" aria-expanded="false" aria-controls="secondaryNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<div class="login-btn hidden-lg hidden-md hidden-sm"> <a href="#" class="btn">Nefsani</a> </div>
</div>
<div id="secondaryNavbar" class="reset-padding navbar-collapse collapse ">
<ul class="secondary-menu-links nav navbar-nav">
<li><a href="Default.aspx">Home</a></li>
<li><a href="OverMezelf-Opleiding.aspx">Over mezelf</a></li>
<li class="dropdown"> <a href="relatietherapie.aspx" data-toggle="dropdown">Mijn aanbod<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="relatietherapie.aspx">relatietherapie</a></li>
<li><a href="individueletherapie.aspx">individuele therapie </a></li>
<li><a href="persoonlijkeconsultgesprekken.aspx">persoonlijke consultgesprekken</a></li>
</ul>
</li>
<li><a href="TariefEnTerugbetaling.aspx">Tarieven en terugbetaling</a></li>
<li><a href="contact.aspx">Contacteer mij</a></li>
</ul>
<ul class="secondary-menu-links nav navbar-nav navbar-right hidden-xs">
<li><a href="Default.aspx" class="btn">Nefsani</a></li>
</ul>
</div>
</div>
</nav>
Die Navbar CSS:
#secondaryMenu {
position: relative;
margin-bottom: 0;
background-color: #54bceb;
border: none;
border-radius: 0;
box-shadow: none;
z-index: 1;
}
#secondaryMenu.sticky {
position: fixed;
box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}
#secondaryMenu .navbar-toggle {
border: none;
}
#secondaryMenu .navbar-toggle .icon-bar {
background-color: #fff;
}
#secondaryMenu a.navbar-brand {
display: block;
padding: 10px 0;
margin-top: 18px;
margin-left: 0;
color: #303030;
font-size: 24px;
font-weight: 700;
}
#secondaryMenu a.navbar-brand span {
color: #4584b4;
}
#secondaryMenu .navbar-header .login-btn > .btn {
color: #fff;
background-color: #303030;
border: none;
border-radius: 0;
-webkit-transition: color .25s ease,background-color .25s ease-in-out;
transition: color .25s ease,background-color .25s ease-in-out;
}
#secondaryMenu .navbar-header .login-btn > .btn:focus, #secondaryMenu .navbar-header .login-btn > .btn:hover {
color: #303030;
background-color: #fff;
box-shadow: none;
outline: 0;
}
.secondary-menu-links li a {
margin-right: 3px;
padding: 24px 14px 21px;
border-bottom: 3px solid transparent;
color: #fff;
font-size: 18px;
line-height: 22px;
font-weight: 700;
-webkit-transition: color .25s ease,background-color .25s ease-in-out,border-color .25s ease;
transition: color .25s ease,background-color .25s ease-in-out,border-color .25s ease;
}
.secondary-menu-links li:last-child a {
margin-right: 0;
}
.secondary-menu-links > .dropdown > a > .caret {
margin-left: 8px;
}
.secondary-menu-links li a .fa {
display: block;
margin: 0 auto 3px;
font-size: 20px;
}
.secondary-menu-links .open > a, .secondary-menu-links .open > a:focus, .secondary-menu-links .open > a:hover, .secondary-menu-links li a:focus, .secondary-menu-links li a:hover, .secondary-menu-links li.active > a, .secondary-menu-links li.active > a:hover {
background-color: transparent;
border-color: #fff;
}
.secondary-menu-links > .dropdown:hover > .dropdown-menu {
display: block;
}
.secondary-menu-links li .dropdown-menu {
padding: 0;
background-color: #fff;
border-style: solid;
border-width: 3px 0;
border-color: #fff;
border-radius: 0;
}
.secondary-menu-links li .dropdown-menu li a {
margin-right: 0;
padding: 10px 15px;
color: #303030;
font-size: 16px;
line-height: 20px;
border: none;
}
.secondary-menu-links > .dropdown > .dropdown-menu > li.active > a, .secondary-menu-links > .dropdown > .dropdown-menu > li.active > a:focus, .secondary-menu-links > .dropdown > .dropdown-menu > li.active > a:hover, .secondary-menu-links > .dropdown > .dropdown-menu > li > a:focus, .secondary-menu-links > .dropdown > .dropdown-menu > li > a:hover {
color: #fff;
background-color: #00678d;
}
.secondary-menu-links.navbar-right {
padding-right: 15px;
}
.secondary-menu-links > li > a.btn {
padding: 24px 30px;
color: #fff;
background-color: #303030;
border: none;
border-radius: 0;
-webkit-transition: color .25s ease,background-color .25s ease-in-out;
transition: color .25s ease,background-color .25s ease-in-out;
}
.secondary-menu-links > li > a.btn:focus, .secondary-menu-links > li > a.btn:hover {
color: #303030;
background-color: #fff;
box-shadow: none;
}
Wenn Sie mehr informaton brauchen Sie mich bitte. danke im voraus!
Bitte markieren Sie richtig als Code Kommentar verfassen nichts mit vb.net & asp.net zu tun hat – Mederic
ich vb.net und asp.net das ist bin mit, warum ich es markiert, aber ich werde diese Tags dann entfernen –
In dem Code, den Sie geben Sie nur gepostet CSS und HTML, so dass keine Notwendigkeit, es zu markieren, wenn der Code nicht erscheint – Mederic