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;
}
Kyle Van Deusen
After spending 15 years as a graphic designer and earning a business degree, I launched my agency, OGAL Web Design, in 2017. A year later, after finding the amazing community around WordPress, I co-found The Admin Bar, which has grown to become the #1 community for WordPress professionals. I'm a husband and proud father of three, and a resident of the Commonwealth of Virginia.
