我正在尝试在移动版的菜单栏中添加汉堡关闭图标。这是我的网站 - https://minnesotaskatingcoach.com/。
当我点击菜单时,没有关闭它的图标。这是我的CSS代码: -
/****** Menu slide-in with background image*******/
/* Hide submenu */
.et_mobile_menu .menu-item-has-children > a {
background-color: transparent;
}
#main-header .et_mobile_menu li ul.sub-menu.hide {
display: none !important;
visibility: hidden !important;
transition: .7s ease-in-out;
}
#main-header .et_mobile_menu li ul.sub-menu.visible {
display: block !important;
visibility: visible !important;
}
.et_mobile_menu .menu-item-has-children > a:after {
font-family: "ETmodules";
font-size: 22px;
font-weight: 800;
content: "3";
position: absolute;
right: 50px;
}
/* Font Awesome */
.fa {
margin-right: 15px ;
}
@media only screen and (max-width: 980px){
#mobile_menu {
display: block !important;
min-height: 100vh;
height: 100%;
top: 0;
right: 0;
position: fixed;
z-index: 9998;
overflow: scroll;
border-top: none;
padding-top: 60px !important;
}
.et_mobile_menu li:nth-child(1) {
padding-top: 20px;
}
.et_mobile_menu li a {
color: #fff !important;
width: 100%;
float: left;
border: none !important;
text-align: left;
margin: 5px 10px;
transition: .2s;
text-transform: uppercase;
font-size: 1.4em !important;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
color: #fff !important;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 30px;
padding-left: 20px;
}
.mobile_nav.closed #mobile_menu {
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background: linear-gradient(
rgba(66, 66, 66, 0.50),
rgba(66, 66, 66, 0.90)
), /* ------ Here you can customize the overlay effect by adding the color you want in rgba format. NOTE: adding two colors you can create a gradient effect ----- */
url("https://minnesotaskatingcoach.com/wp-content/uploads/2018/04/MPY_BMR_20180410_0039-XL.jpg"); /* ----- Add here the url of the image you want as background ----- */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.4s 0s;
-moz-transition: -moz-transform 0.4s 0s;
transition: transform 0.4s 0s;
}
.mobile_nav.opened #mobile_menu {
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background: linear-gradient(
rgba(66, 66, 66, 0.50),
rgba(66, 66, 66, 0.90)
),
url("https://minnesotaskatingcoach.com/wp-content/uploads/2018/04/MPY_BMR_20180410_0039-XL.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.4s 0s;
-moz-transition: -moz-transform 0.4s 0s;
transition: transform 0.4s 0s;
}
/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
content: "\4d";
}
#main-header .container.clearfix.et_menu_container {
width: 100%;
}
.mobile_menu_bar:before {
padding-right: 10px;
color: #ffffff !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
color: #fff !important;
border: 1px solid #fff;
width: 30px;
height: 30px;
border-radius: 50%;
}
}
@media only screen and (max-width: 980px) {
.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar {
z-index: 9999;
}
#et-top-navigation {
padding-right: 5px;
}
}
@media only screen and (min-width: 481px) {
#mobile_menu {
width: 320px;
margin-left: calc(100% - 320px);
}
}
@media only screen and (max-width: 480px) {
#mobile_menu {
width: 260px;
margin-left: calc(100% - 260px);
}
}
@media only screen and (max-width: 340px) {
#mobile_menu {
width: 100%;
margin-left: 0;
}
}
这段代码有什么问题?请帮我在菜单上添加一个关闭图标。
答案 0 :(得分:0)
我已经快速浏览了一下您的网站。如果您添加以下CSS规则,它将解决该问题。 z-index
用于分层 - 数字越大,它在堆栈中的视觉效果就越高。
如果您在CSS中找到.mobile_menu_bar
规则,只需向其添加z-index: 9999
,类似于以下内容。
.mobile_menu_bar {
z-index: 9999;
}
干杯, 约什