I made my Divi mobile menu go from not to hot. Here’s how.
This blog post contains referral links. I don’t recommend stuff that my clients and I haven’t loved on our creative biz adventure. I will receive a modest credit to my account should you love these tools and apps as much as I do!
Operation refresh: Divi Mobile Website Edition
Every season, I give my website some nips, some tucks, and some much-needed adjustments to both the look and user experience. Yes, it’s definitely one of the benefits of designing websites professionally and also because I happen to love redecorating my digital home.
Just a few of the benefits of giving your website a little spring cleaning:
- That New Website Smell: Changing up graphics, typefaces, and colors is a quick way to give your audience a new experience
- Get Strategic: Armed with your Google Analytics data, you can plan new user journies for website visitors and increase your conversions
- Out With The Old: Update your plug-ins and see what’s working on your website and what you’ve been begrudgingly using because you haven’t had time to fix it
I spruced up a few things around the ol’ digital domicile this month, but now I’m turning my attention to Creative Enabler’s mobile experience.
THat Divi mobile menu is ugly
I have been putting off fixing up a few of my website’s design chores, but that Divi mobile menu has been getting under my skin since I first made the move to Divi (December of 2017, as it were).
My biggest issue is that it make a Divi website look like a Divi website that’s been barely customized from a pre-set template. Youch. That gray hamburger menu with the sad drop-down has got to go.
I knew I wanted to simplify the look without going too artsy on the menu; After all, if someone is viewing my website on a mobile phone, I’m now competing with 53 other apps and their text messages for attention.
I also knew that I wanted to make the hamburger menu intuitive upon opening that the words were clickable.
BEHOLD, MY NEW AND IMPROVED CUSTOM DIVI MOBILE MENU:
Divi Mobile Menu CSS codes FTW
The CSS codes to customize the Divi mobile menu achieved the following:
- Removed gray Select Page menu from Divi mobile website
- Added WooCommerce cart button to left of logo in Divi mobile menu
- Added hamburger menu link to right of logo in Divi mobile menu
- Added drop-down menu with color backgrounds in open hamburger menu
- Hamburger menu displays X upon opening menu
- Created a fixed mobile menu on Divi
- Added more spacing between letters on link url text in hamburger menu
DIvi Struggle Is Real
Want my exact code for what you just saw? Need help with your Divi styling?
No Fake News(letters)
#JustTheTips is not an elaborate sales pitch masquerading as a resource for creative entrepreneurs.
Get microdoses of achievable inspiration weekly, revealing the mindset, strategy, and business infrastructure of successful brands.