Spice Up Your Mobile Menu Design

Transform your mobile menus from boring to bad-ass with these simple tweaks!

Kyle Van Deusen

Published:

Filed Under:

General

Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

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.

Slideout (2)
This content contains affiliate links. View our affiliate disclaimer.

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;
}
Share This Article!
Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

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.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

The Friday Chaser

Wash down the week with the best of The Admin Bar! News, tips, and the best conversations delivered straight to your inbox every Friday!

Latest Events

July 12th, 2024

Vitality – Part 2: Largest Contentful Paint (LCP)

With Google's ever-evolving standards, mastering these metrics is not just nice-to-have, it's critical for every developer who wants a website that performs.

June 14th, 2024

Vitality – Part 1: Time to First Byte (TTFB)

With Google's ever-evolving standards, mastering these metrics is not just nice-to-have, it's critical for every developer who wants a website that performs.

May 24th, 2024

Mastering SMTP

This webinar has been carefully designed to turn the complex subject of WordPress email delivery into clear, actionable steps — specifically for the freelancer and agency owner delivering these services to clients.

More Articles

Stop Keyboard

Give It to Me Straight: Words to Avoid in Email for Better Communication

Want to communicate more directly & confidently – without sounding rude? Discover the top words & phrases to avoid in your emails, while still being polite.

5 Tips & Tools To Improve Your Typography B Log

Boost Responsiveness, Balance, & Accessibility with These Top Typography Tips!

Learn how just a few simple tools and tips can drastically improve your designs!

Ttfb

Understanding and Improving Time to First Byte (TTFB)

Learn how to improve Time to First Byte (TTFB) and boost your website’s speed with practical tips and strategies.