Add Hamburger closing menu icon in Wordpress

Question

I am trying to add a Hamburger closing icon to my Menu bar in mobile version. This is my website- https://minnesotaskatingcoach.com/ .

When I click on menu there's no icon for closing it. This is my CSS code:-

  /****** 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;
  }
}

What's wrong with this code? Please help me to add a closing icon to menu.

Welcome to SO! Thanks for providing your CSS, but can you please provide the relevant HTML as well? It's rather difficult to answer this question without being able to see how your existing page is rendered. It would help if you could update your question to list **all** relevant code in a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve). If your HTML is generated server-side, could you please post the **output**. For further information, please refer to the help article regarding [**how to ask good questions**](http://stackoverflow.com/help/how-to-ask) :) — Obsidian Age, Apr 23 '18 at 03:41

score 0 · Accepted Answer · answered Apr 23 '18 at 04:51

I've had a quick look at your site. If you add the following CSS rule, it will fix the issue. z-index is used for layering — the higher the number, the higher it will appear visually in the stack.

If you find the .mobile_menu_bar rule in your CSS, just add z-index: 9999 to it, similar to below.

.mobile_menu_bar { z-index: 9999; }

Cheers, Josh

Add Hamburger closing menu icon in Wordpress

1 Answers1