Click Anywhere to expand hamburger menu on mobile to show children

[plentyvegan]

On mobile and any screen size where the hamburger appears, users can only click on the far right to expand the menu. This doesn't always line up with the ^ image that is supposed to indicate where to click to expand. In fact, in the link I provide below, it only lines up next to "shop".

Instead of solving this by lining up the indicator image with the area that's clickable, I would like the entire row to be an option to expand the menu. So, users should be able to click on the word "shop" and see the children under "shop.

I cannot determine what makes

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {

clickable to expand but not:

.genesis-nav-menu.responsive-menu .menu-item-has-children > a {

Here is the code:

.genesis-nav-menu.responsive-menu .current-menu-item > a,
.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu.responsive-menu a,
.genesis-nav-menu.responsive-menu a:hover {
background: none;
line-height: 1;
padding: 16px 20px;
}

.genesis-nav-menu.responsive-menu .menu-item-has-children {
cursor: pointer;
}

.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
margin-right: 60px;
}

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
content: "\f347";
float: right;
font: normal 16px/1 'dashicons';
height: 16px;
padding: 16px 20px;
right: 0;
text-align: right;
z-index: 9999;
}
.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
content: "\f343";
}

http://plentyvegan.staging.wpengine.com

[emasai]

Add the following to .genesis-nav-menu.responsive-menu > .menu-item-has-children:before
width: 90%;
position: absolute;

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[plentyvegan]

That makes me so happy, emasai - thanks!

[plentyvegan]

One more question.

Is there a way to remove the highlighting when you click to expand the menu on mobile? It highlights the parent and children in blue when I tap:

http://plentyvegan.staging.wpengine.com

Thanks again!

[Author]

Posts