Mobile menu needs changing on wordpress theme

I am using a theme called allegiant in wordpress and all is fine as its early days, but the mobile menu doesnt work as i would like it to.

The main nav has sub menu’s that appear on rollover, but when in mobile view the sub categories are all on show, what I would prefer is a way for the mobile vertical nav to have the sub categories appear on click and all the children really, in maybe a slider way, Im not sure, but anything will be better than having all the sub categories on show, as in some cases the sub categories could keep going for 5 levels, so would like it if they only appear on click and they all appear beneath the first button.

This is the code for the mobile menu from what I can see

.menu-mobile { display:none; visibility:hidden; opacity:0; font-size:1.2em; position:fixed; padding:5% 70px 5% 5%; top:0; right:100%; width:100%; height:100%; overflow:auto; background:#fff; z-index:999998; -moz-transition:0.3s all; -webkit-transition:0.3s all; transition:0.3s all; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.menu-mobile-active .menu-mobile { visibility:visible; opacity:1; right:0; }
.menu-mobile > ul { display:block; margin:0; padding:0; }
/* Menu Elements */
.menu-mobile ul, 
.menu-mobile li, 
.menu-mobile a { -moz-transition:0.4s all; -webkit-transition:0.4s all; transition:0.4s all; }
.menu-mobile li { position:relative; display:block; margin:0; list-style:none; }
.menu-mobile li a { display:block; margin:0; padding:10px; border-radius:2px;-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
/* Icon and Description */
.menu-mobile li:hover > a, 
.menu-mobile li a:hover { text-decoration:none; }
/* Children Elements */
.menu-mobile .has-children > a { padding-right:25px; }
.menu-mobile li ul { display:block; margin:0 0 0 25px; padding:0; }
.menu-mobile li ul li { width:auto; display:block; float:none; }
.menu-mobile li ul li a { width:auto; line-height:1.5; height:auto; padding:10px; }

And this is the site as it stands -

You would need JS to do this properly and attach a click handler to the submenus so that you can toggle a class to hide/show the submenus when clicked.

The problem is that you only need this to work for small screens so you can’t simply add the js at the start because it would interfere with the hover menu on desktop. You could use matchmedia to do this which is basically media queries for JS and therefore set the script to only run on the smaller screen size.

I have a rough demo here that shows how you can turn a hover menu into a click menu so you would need to use something along those lines.

This is probably a question for the JS forum as my JS is pretty basic and probably flawed in some way.:slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.