时间戳

首页 > 解决方案 > 导航菜单没有出现在顶部

html - 导航菜单没有出现在顶部

问题描述

如何使我的导航菜单永久位于顶部？我在一个页面上有两个导航菜单 - 一个单击并弹出的主汉堡导航菜单，然后是一个嵌入式页面导航菜单

我希望汉堡导航菜单永久位于顶部，但由于某种原因，嵌入式导航菜单会出现。

这是问题的代码笔：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; 
    }

标签： htmlcss

解决方案

你的问题是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-index 可以解决这个问题。

推荐阅读