如何将导航菜单永久置于顶部?我在页面上有两个导航菜单-一个单击并弹出的主汉堡导航菜单,然后是一个嵌入式页面导航菜单
我希望将汉堡导航菜单永久放在顶部,但是由于某种原因,嵌入式导航菜单会一直显示出来。
以下是该问题的一个代码笔:https://codepen.io/TheGreatEscape/pen/ebYgGO 如果出现问题,这是一部简短的youtube视频:https://youtu.be/sWzCLOzRJUQ
和相关的CSS代码:
/*===== NAV BUTTONS ===*/
#menu-button{ display:none}
a {
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
}
a:hover, a:active, a:focus {
outline: none;
float:none;
clear:both;
text-align:center;
display:inline-block;
position:absolute;
left:0;
right:0 }
.templateux-navbar {
position: fixed;
top: 0px;
left: 0;
width: 100%;
padding: 0;
z-index: 99999;
}
.templateux-navbar .container-fluid {
max-width: 100%;
}
.templateux-navbar .toggle-menu {
z-index: 9999;
}
.templateux-navbar .templateux-menu {
top:35px;
float:none;
clear:both;
text-align:center;
display:inline-block;
position:absolute;
right:210px
}
.templateux-navbar .templateux-menu ul {
position:relative;
float:right;
margin-bottom: 0;
margin-top: 18.5px;
right:178px;
}
.templateux-navbar .templateux-menu ul li {
display: block;
}
.templateux-navbar .templateux-menu ul li a {
left:30px;
top:.5px;
text-decoration: none;
border-radius:0; border:none;
line-height:40px;
display:block;
margin-right: 0px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .05em;
color: #1a1a1a;
position: relative;
padding-bottom: 5px;
}
.templateux-navbar .templateux-menu ul li a:before {
content: "";
position: absolute;
bottom: 6px;
height: 3px;
width: 0;
left: 0px;
background: #f70f4d;
-webkit-transition: .45s width ease;
-o-transition: .45s width ease;
transition: .45s width ease;
}
.templateux-navbar .templateux-menu ul li a:hover:before {
width: 100%;
}
.templateux-navbar .templateux-menu ul li a:hover {
text-decoration: none;
background-color: inherit;
border:none;
color:#1a1a1a;
font-weight:bold
}
.templateux-navbar .templateux-menu ul li h5 {
position: absolute;
text-decoration: none;
background-color: inherit;
left: 125px;
top: -8px;
color:#1a1a1a;
font-weight:bold;
font-size: 13px;
border-radius:0;
border:none;
line-height:40px;
display: inline-block;
width: 100%;
letter-spacing: .1em;
}
.templateux-navbar .templateux-menu ul li.active > a:before {
width: 100%;
}
.templateux-navbar .templateux-menu ul li:last-child a {
margin-right: 0;
}
/*===== BACKGROUND MENU FOR MENU BUTTON, GET IN TOUCH ===*/
.menu {
width: 33px;
height: 33px;
padding: 5px;
display: block;
cursor: pointer;
position: relative;
float: right;
right: -56px;
top: 24px;
z-index: 1;
}
.menu span {
cursor: pointer;
height: 3.25px;
width: 24px;
margin-bottom: 3px;
background: #000;
position: relative;
right: 0;
display: block;
transform: rotate(0deg);
transition: .7s ease;
}
.hidden {
opacity: 0;
transition-delay: .5s;
pointer-events: none;
cursor: default;
}
.visible {
opacity: .97;
}
.menu.open span:nth-child(1) {
top: 10px;
transform: rotate(180deg);
transition: .7s ease;
background: #ffffff;
}
.menu.open span:nth-child(2) {
opacity: 0;
right: 100px;
background: #000;
}
.menu.open span:nth-child(3) {
top: 0px;
transform: rotate(-180deg);
transition: .8s ease;
background: #ffffff;
}
#navigation {
background: #000000;
font-family: 'Titling Gothic Bold';
color: rgb(0, 0, 0);
font-size: 0px;
width: 100%;
height: 450px;
text-align:left;
}
答案 0 :(得分:0)
您的问题是z-index
。我通过将类hamburger
添加到您的第一个.templateux-navbar
元素中进行了修复,然后对CSS进行了一些修改。您可以在下面看到经过修改的CSS。
.templateux-navbar {
position: fixed;
top: 0px;
left: 0;
width: 100%;
padding: 0;
z-index: 9;
}
.templateux-navbar.hamburger {
z-index: 10;
}
您的代码存在此问题,因为您为两个菜单赋予了相同的z-index,因此这意味着HTML中下一个定义的元素自然会获得更高的优先级,在您的情况下,这是您的第二个导航。
使您的汉堡菜单具有更高的z索引可以解决此问题。