When it comes to the mobile menu options inside of GeneratePress, I’ve always been a big fan of the slide-in off-canvas option.
But the options in the customizer alone leave the menus feeling just a tad boring.
Now, I’m not making the case that your mobile menu should be some extravagant or elaborate design — but I do think going from this, to this is a huge improvement.
In fact, I recently did this on a client project, and I think it ended up being my favorite part of the entire website!
And thankfully, it’s really easy to do with just a couple GeneratePress elements and one CSS rule.
So, if you’re interested in spicing up your mobile menus, stick around, and let’s get into it!
Here’s the CSS you need:
#generate-slideout-menu:before {
position: absolute;
width: 100%;
height: 100%;
content:'';
background-image: url('IMAGE-URL');
background-position: center center;
background-size: cover;
opacity: .3;
}