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
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.
I am tearing my hair out trying to design a responsive header. Regular Menu with a Site Logo/Title on the left and the Menu on the right works fine. I am trying to design a header with a Site Logo on the left with the Menu in the centre and a Search bar on the right. And on Mobile I want the Menu to becom part of the hamburger and the Search bar to drop down below the Site Logo and Hamburger menu. I have come close using 2 columns, 1 for site logo and menu and the other for the Search so on mobile they stack. But the site logo gets too small and the search bar doesnt scale accordingly and looks too big. and the gap between the Site logo and search is more than I would want but If i adjust the block spacing it affects on Desktop also cos there is no responsive settings. Simple things are frustrating. Blocks as an idea is great for simple websites so we can sort of create it ourselves but the lack of responsive controls is something I just cannot understand.
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.
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!
![PURPEECH - นี่ฉันเองคนที่... (It's me) [Official MV]](http://i.ytimg.com/vi/NuhHd0hOOg8/mqdefault.jpg)
Thank you, this is exactly what I needed to solve my problem!
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
Really informative and helpful content - thank you.
Thanks!!
That plugin is great! {Block Visibility } It is exactly what I needed.
Yes, this visibility trick is a life saver!
Yep!
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.
Congrats you made really a great video, super useful
I am tearing my hair out trying to design a responsive header. Regular Menu with a Site Logo/Title on the left and the Menu on the right works fine. I am trying to design a header with a Site Logo on the left with the Menu in the centre and a Search bar on the right. And on Mobile I want the Menu to becom part of the hamburger and the Search bar to drop down below the Site Logo and Hamburger menu. I have come close using 2 columns, 1 for site logo and menu and the other for the Search so on mobile they stack. But the site logo gets too small and the search bar doesnt scale accordingly and looks too big. and the gap between the Site logo and search is more than I would want but If i adjust the block spacing it affects on Desktop also cos there is no responsive settings.
Simple things are frustrating. Blocks as an idea is great for simple websites so we can sort of create it ourselves but the lack of responsive controls is something I just cannot understand.
The navigation parts are still the most painful to work with here
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.
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!
thanks a lot
Yes. mobile has serious issues.
Twenty Twenty Four sucks balls. I cant event resize an image the same in column!