[英]Bootstrap “hamburger” mobile menu z-index issue
我一直在發誓,谷歌搜索,比較代碼,並且對這種情況發誓更多,因為我的“漢堡包移動菜單”中的項目下拉列表位於頁面上所有其他內容的后面。
我一直在調整z-index在不同級別和結構上的不同變化,但是我還沒有找到解決方案。
希望在CSS引導方面比我有更多技能的人可以找出問題所在。
HTML
<div class="navbar-default navbar-fixed-top with-bg" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="header_menu visible-xs visible-sm hidden-md hidden-lg">
<a href="ViewTeam.aspx?teamid=1" id="lnkPersonalMobile" style="display:block"><i style="padding-right:5px" class="glyphicon glyphicon-star-empty"></i>Mitt lag</a>
<a href="Forum.aspx?type=1" id="lnkCoachForumMobile" style="display:block"><i style="padding-right:5px" class="glyphicon glyphicon-star-empty gly-spin"></i>Trenerforum</a>
<div style="float: left">
</div>
</div>
<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="Default.aspx">
<div id="clublogo" class="logo-placeholder" style="background-image:url(https://klubbweb.blob.core.windows.net/clubid1/ef33672c-3b2c-4ee0-856e-b86b1b4ae90flogo.png);"></div>
</a>
</div>
<div class="header_menu hidden-xs">
<a id="lnkAboutUs" href="/ViewAboutUs">Om GHK</a>
<a id="lnkTeamOverviewDesktop" href="/TeamOverview">Lagoversikt</a>
<a id="lnkEventCalendar" href="/EventCalendar">Eventkalender</a>
<a id="lnkAdminPageDesktop" href="/AdminPage">Admin</a>
<a href="ViewTeam.aspx?teamid=1" id="lnkPersonal" style="display:block"><i style="padding-right:5px" class="glyphicon glyphicon-star-empty"></i>Mitt lag</a>
<a href="Forum.aspx?type=1" id="lnkCoachForum" style="display:block"><i class="glyphicon glyphicon-star-empty gly-spin"></i> Trenerforum</a>
<div style="float: left">
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<!--<a href="#" class="hidden-xs">Home</a>-->
<a id="lnkTeamOverview" class="visible-sm" href="/TeamOverview">Lag</a>
</li>
<li class="active">
<a id="lnkAdminPage" class="visible-sm" href="/AdminPage">Administrasjon</a>
</li>
<li class="active">
<a id="lnkTeamOverviewMobile" class="visible-sm" href="/EventCalendar">Eventkalender</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
覆蓋的引導程序樣式
.navbar-default {
background-image: url('Images/header-bg.png');
background-position: top left;
background-repeat: no-repeat;
background-color: #333;
border-color: #732181;
height: 130px;
border-bottom: 4px solid #7b9cc6;
}
.navbar-default .navbar-brand {
color: #ffffff;
padding-left: 0;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
z-index: 888888!important;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #00468e;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #00468e;
}
.navbar-default .navbar-toggle {
border-color: #00468e;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #00468e;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ffffff;
z-index: 99999999;
}
.navbar-default .navbar-link {
color: #ffffff;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
input[type="checkbox"] {
height: 20px;
width: 20px;
line-height: 0.1em!important;
}
.checkbox-label {
line-height: 2em;
}
@media (max-width: 767px) {
.navbar-default {
background-color: #333;
border-color: #00468e;
height: 64px;
border-bottom: 4px solid #00468e;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #00468e;
}
.navbar-default .navbar-header {
padding-left: 15px;
}
.with-bg {
}
.logo-placeholder {
height: 55px!important;
width: 55px!important;
background-size: 100% 100%;
margin-top: -10px;
margin-left: -10px;
}
.navbar-default .navbar-brand img {
width: 101px;
height: 27px;
}
}
我不建議在樣式表中使用!important
聲明。 為什么不僅創建一個新類並將所有自定義屬性應用於HTML中的此元素?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.