Spice Up Your Mobile Menu Design

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;
}