Customize Mobile Views on Twenty Twenty-Four Theme 📱

⭐️ Book a 30 minute 1:1 WordPress Q&A with me! thewpminute.com/fast
Customizing the Twenty Twenty-Four theme for unique mobile experiences seems to be lacking at the time of this recording. However, I'll recommend these two plugins today, which should help with some basic mobile customization needs.
Block Visibility Plugin: wordpress.org/plugins/block-v...
My Video: Crazy this plugin is FREE?! (Block Visibility Plugin) 🔥 • Crazy this plugin is F...
Twentig: twentig.com
My Video: Supercharge Twenty Twenty-Four Theme with Twentig! 🚀 • Supercharge Twenty Twe...
Chapters:
00:00 What's missing in Twenty Twenty-Four
00:44 Block Visibility & Twentig Plugins
01:30 Default mobile nav/header features
04:25 Customizing w/ Block Visibility & Twentig
07:50 Customizing a page/post w/ Block Visibility
08:45 Final thoughts on mobile development
WordPress news: thewpminute.com/
Subscribe to the newsletter: thewpminute.com/subscribe/
Donate to us or join the membership: thewpminute.com/support/

[@stratlantic]

Really informative and helpful content - thank you.

[@WPMinute]

Thanks!!

[@lisahernandezlucas]

Thank you, this is exactly what I needed to solve my problem!

[@filiaikasyilviani408]

thanks a lot

[@user-ic2ot4ur3q]

That plugin is great! {Block Visibility } It is exactly what I needed.

[@chebfarid62]

Yes, this visibility trick is a life saver!

[@WPMinute]

Yep!

[@michellaigrand5767]

Very good video by exploring the hot subject of responsive menus. Often people make demos with desktop configuration but forget that mobile design is the most common use case now. In this field, WordPress core have still serious drawbacks. By the way, block themes like Spectra One have some basic block visibility inside it. It's surprising to see that, because normally Wordpress theme staff don't authorise functional features in themes on the WordPress theme repository

[@chadreilly]

I very much appreciate the attention to mobile, even if there isn't much here yet. Unfortunately, it doesn't look like either plugin add much for mobile first design.

[@artyseum]

Thank you, pls do you have an idea how to reduce the width of the overlay menu to about 50% once the hamburger icon in clicked, instead out it covering the whole screen both on mobile and desktop.

[@chebfarid62]

If you take a look at the source code of your page, you'll find tags which identify the navigation (hamburger) menu as "modal-1".
Now in the Style Editor of TT4 you can add the following custom CSS:
#modal-1{
background: rgba(255,255,255, 0.8) !important;
width:70%;
height:70%;
}
Just fiddle around as you like with the values for color, alpha (= transparency), width and height, works for me!

[@EricNeedle]

Yes. mobile has serious issues.