我采用了引导程序主题,并且手机上的汉堡包菜单不起作用。在移动设备上将菜单切换为打开状态时,它将先打开然后快速关闭,但是菜单链接仍然可以像被隐藏一样被按下,就像它们不可见一样。
我检查了原始文件菜单是否损坏,并且没有。我尝试使用谷歌搜索来找出问题所在,但我一直在努力寻找答案。
我唯一拥有的是当我使用.menu {position: absolute;}
时,手机上的菜单会打开,然后迅速关闭。当我将其更改为.menu {position: relative;}
时,菜单将保持打开状态,但是可以完全对齐并且看起来不太好。
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse.collapse">
<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="navbar-brand">
<div id="logo" class="pull-left">
<a href="index.html"><img src="images\robark-Logo.png" alt="Robark Solutions Logo" title="Robark Solutions" width="260" height="90"/></a>
</div>
</div>
</div>
<div class="navbar-collapse collapse">
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a href="index.html" class="active">Home</a></li>
<li role="presentation"><a href="about.html">About Us</a></li>
<li role="presentation"><a href="services.html">Services</a></li>
<li role="presentation"><a href="portfolio.html">Portfolio</a></li>
<li role="presentation"><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
CSS:
.navigation {
background-color:#fff;
padding:0;
}
.navbar-brand {
min-height: 100px;
}
.navbar-brand h1 {
margin-top:9px;
padding-top:5px;
float: left;
font-size: 25px;
color:#333;
text-transform:uppercase;
font-weight:900;
}
.navbar-brand h1 span {
color: #F0A830;
}
.menu {
position: absolute;
overflow: hidden;
font-size:12px;
float:right;
text-transform:uppercase;
font-weight:700;
}
.menu:active ul {
display: block;
}
.menu ul.nav-tabs li {
color:#000;
}
.nav-tabs {
border-bottom: 0;
}
.nav-tabs > li {
float: left;
margin-bottom: 0;
}
.nav-tabs > li > a {
border-radius:0;
color:#333;
padding:30px;
}
.nav-tabs > li > a:hover {
color: #F0A830;
border-color: #fff #fff #fff;
border-radius:0;
background-color:#fff;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.nav-tabs > li > a.active {
color: #F0A830;
border-radius:0;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
@media (max-width: 767px) {
.navbar-brand {
min-height: 85px;
padding-top: 6px;
}
.navbar-brand h1 {
margin-top: 0;
}
.nav-tabs > li {
float: none;
display: block;
}
.menu {
position: absolute;
left: 0;
right: 0;
background: #fff;
}
.menu .collapse {
display: none;
visibility: hidden;
}
.menu-default{
z-index: 1030;
}
.menu:active ul {
display: block;
}
.nav-tabs > li > a {
padding:15px 15px;
border-bottom: 1px solid #f3f3f3;
}
.nav-tabs > li > a:hover {
border-color: #f3f3f3;
}
}
引导CSS:
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}
.navbar-collapse.in {
overflow-y: auto;
}
@media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
visibility: visible!important;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 340px;
}