Question posted in
The full documentation can be found here.

Divi theme – Two problems with mobile menu WordPress CSS

I copied some code from a blog and adjust some code to make the mobile menu fullscreen for my website on WordPress. I made it fullscreen for mobile and tablet view. But there are two problems.

  1. When I open the menu, I am not able to close the menu because the close button and the ‘X’ are beneath the menu-overlay, I tried something with the z-index but it didn’t worked out. How do I make the Close button ‘X’ always visible and clickable when the menu is open?

  2. When I open the menu I want the menu to be locked so it is not able to scroll down and see content, but when you open the menu you are only able to see the menu and not able to scroll down unless you close the menu. How do I fix this?

It is the menu on tablet and phone

Link to website->

https://vpwebdesign.disoh.nl/template-b/

Code that I used:

/* Text left of hamburger in the Theme Builder */
.et_mobile_nav_menu:before  {
content: 'MENU';
position: absolute;
right: 40px;
z-index: 9999;
}

/* Text left of hamburger in Divi 3 */
#et_mobile_nav_menu:before  {
content: 'MENU';
position: absolute;
right: 33px;
bottom:30px;
}

/* X icon in expanded mobile menu */
.mobile_nav.opened .mobile_menu_bar:before {
content: "4d";
}

/* Remove the top line in the mobile menu*/
.et_mobile_menu {
border-top:0px;
}

/* Center-align moble menu items */
.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px !important;
}

/* Make mobile menu fullwidth */
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}

/* Make the mobile menu full height */
.et_mobile_menu {
min-height:100vh !important;
min-height: -webkit-fill-available;
padding-top:150px !important;
margin-top:-150px!important;
}

html {
height: -webkit-fill-available;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    First of all, thanks for your answers!

    For your first question (access to close button click), you can play with the pointer-events attribute like this :

    ul.et_mobile_menu{pointer-evens:none;} ul.et_mobile_menu li{pointer-evens:all;}

    It did the trick to make it clickable but the text menu and the close button 'X' are still beneath the menu visually, how do I get them more visible so they stand out?

    For the other question (don't make the body scroll), you can add a class on the body when you open/close the menu :

    body.menu-open{ position:fixed; } Difficulty for second point is to find the click event that attach "closed/opened" class on "mobile_nav" and write a little JS script to attach/remove the class on the body at this moment in order the CSS can be applied.

    Usually on a wordpress the JS files are stocked in the theme or plugin folder.

    I will try it, seems a little difficult for me but I will give it a try.


  2. 0

    For your first question (access to close button click), you can play with the pointer-events attribute like this :

    ul.et_mobile_menu{pointer-evens:none;}
ul.et_mobile_menu li{pointer-evens:all;}

    For the other question (don’t make the body scroll), you can add a class on the body when you open/close the menu :

    body.menu-open{ position:fixed; }

    Difficulty for second point is to find the click event that attach "closed/opened" class on "mobile_nav" and write a little JS script to attach/remove the class on the body at this moment in order the CSS can be applied.

    Usually on a wordpress the JS files are stocked in the theme or plugin folder.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search