First Look at Mobile Menu CK for Joomla 4 - 👀 WMW 180

Written by: Tim Davis Created: 13 October 2022

Category: Watch Me Work Live Streams

Hot!Hits: 921Reading time: 01:59

Joomla 3 to Joomla 4 Migration Watch me Work Live Streams Joomla Training Cohort

In this live stream we took a first look at Mobile Menu CK and it was pretty rough, lol. It took a while to figure out some things because I had some different ideas about how things worked. I only mention that because I don't think you should judge the extension by this video.

00:00:00 - Intro, Sponsors & Greetings
00:02:45 - Mobile Menu CK Light: Initial Setup
00:06:41 - Installation & Basic Configuration
00:12:50 - Early Challenges & Debugging
00:22:09 - Features Overview & Limitations
00:31:55 - Upgrading to Pro Version
00:37:31 - Troubleshooting MaximenuCK vs. Template
00:48:51 - Advanced Troubleshooting
01:04:54 - Breakthrough & Final Solution
01:31:10 - Final Adjustments & Reflections
02:15:55 - Upcoming Livestream Schedule
02:52:05 - Recap: Desktop vs. Mobile Menu Solutions
03:07:52 - Farewell & Gratitude

✅ Summary

1. Introduction & Setup Begins
   Tim introduces Mobile Menu CK, shares sponsor info, and sets the stage using a basic Joomla 4 site.

2. Free Version Installation
   Downloads and installs the Mobile Menu CK Light and Maxi Menu CK Light, but the mobile menu does not display.

3. Initial Troubleshooting
   Identifies configuration mistakes—editing the wrong menu module. Fixes it, then re-tests on mobile view.

4. Features & Limitations
   Finds that many useful features (like text styling, merging menus) are Pro-only. Begins testing item-specific mobile display options.

5. Cache Issues & Browser Testing
   Clears Joomla cache, tests different browsers, and attempts viewer suggestions—menu still inconsistent on mobile.

6. Upgrading to Pro Version
   Installs Mobile Menu CK Pro, unlocking style options and merge settings. Starts fresh with a new module setup.

7. Template Conflicts & Module Adjustments
   Unpublishes default modules, tests different template positions, and installs Template Creator CK to improve layout control.

8. Deeper Troubleshooting
   Attempts solutions like hiding desktop menus with Bootstrap classes, creating a dedicated “Mobile Only” menu, and checking merge behavior.

9. Final Breakthrough
   Finds success by assigning separate modules:

• One for desktop (hidden on mobile)

• One for mobile (hidden on desktop)
  Both share the same position in the template.

10. Final Polish & Reflections
    Verifies menu behavior across devices, reflects on the complex troubleshooting journey, and confirms a flexible, working solution.

🔧 Key Takeaways

• Two-module approach ensures clean separation of desktop and mobile menus.

• Bootstrap visibility classes like d-none d-md-block are crucial.

• The Pro version is worth it for menu merging and custom styling.

Interesting blog? Like it on Facebook, Post it or share this article on other bookmarking websites.

Written by: Tim Davis

Tim Davis is the founder and owner of Cybersalt.