How to set full/mobile menu switching & padding
-
Hello,
The menu appears OK at 1920 pixels wide. However at lower width resolutions, menu items with more than one word wrap, then at a specific width, the menu switches to the mobile menu with the bars.
1) I would like for the full menu to switch to the mobile menu sooner, but I can’t see a setting in admin to achieve this.
2) I would also like the padding/margin around the menu to be reduced so the header uses less height, and I again can’t find a setting to achieve this.
See screen recording here: https://a.cl.ly/YEu4zRLD
Any help configuring the above would be appreciated.
Thank you,
BharatThe page I need help with: [log in to see the link]
-
Hi @bharatk,
I would like for the full menu to switch to the mobile menu sooner, but I can’t see a setting in admin to achieve this.
I checked your site, and I see you seem to have resolved this one. Have you added custom CSS to solve this? My understanding is that the menu should “collapse” automatically when there is an overlay, so I think it is odd that it was not working this way.
I would also like the padding/margin around the menu to be reduced so the header uses less height, and I again can’t find a setting to achieve this.
Have you tried to change the dimensions for the group block for the menu?
Full Size: https://d.pr/i/wydrhwHi @bharatk,
I haven’t resolved the menu switching to mobile view a little earlier. May I ask why you think I have (i.e. was it switching earlier for you)?
Yes, I can’t remember precisely how it was showing, but I can reproduce your issue anyway now.
In this case, do you know if this was working as expected before?
While it is not possible to change that without changing the theme or using custom code, this shouldn’t apply this way. Maybe it has some custom code changing how it should work natively?
With regards to the space around the menu, there is only bottom padding of 1 which I added otherwise the menu had a large gap at the top (which I can’t reduce) and the bottom gap was too small compared to the top and it looked odd. See here: https://a.cl.ly/Bluzqjgy
Actually, if you click this “settings icon”, it should allow you to set a custom padding/margin:
Full Size: https://d.pr/i/nwe3cwHi @bharatk,
Thank you for the additional details.
The menu hasn’t switched as expected since I started using the theme, and I have not added any custom code. If you can suggest any custom code to earlier switch the text menu to the 2/3 bars icon then I would appreciate it.
This is likely caused by a conflict with a plugin. Have you tried a conflict test?
How to test for conflicts
The best way to determine if the issue is being caused by a plugin is to:
1. Temporarily deactivate all plugins. You can do this manually or use a plugin to help (see below for tools).
2. Try to reproduce the problem. If the problem is resolved, it’s a plugin conflict. To figure out which plugin is causing the problem, continue to the next step.
3. Reactivate your other plugins one by one, testing after each, until you find the one causing conflict.Recommended tools to help with troubleshooting
* Meks Quick Plugin Disabler will remember what plugins you had active when you switch it back on.
* You can clone your site to a staging environment and perform tests without modifying your live site or impacting customers. Many hosts provide staging facilities, so it’s worth checking in with them. It’s also possible to do it using the free WP Staging plugin.Re: space around the menu, I can reduce the size of the space under the menu when selecting the group and then using the settings icons, however it’s the top that I can’t change (see here: https://a.cl.ly/7KuWn91X). It seems there a space between the very top of the header down to the top of the group which can’t be selected and then configured. That is why I left the bottom space unchanged which matches the top until I can reduce both. Any suggestions would be appreciated.
Thank you for the screenshot!
I see your point now. This is happening because of the padding set to the top of the site (not to the header itself).
You can go to Style options, then access Layout and change it from there for the top padding:
Full Size: https://d.pr/i/Pt8wJWHi, @bharatk! Thank you for sharing that.
What you shared for the code on the editor doesn’t actually have what I would like to review.
Basically, you would need to get the header template part code, not the full page code.
Full Size: https://d.pr/i/VgGV8lHi @bharatk, thank you for sharing the code for the header.
Oddly, I see it working as expected from my end with the same code:
Full Size: https://d.pr/i/dIPzg8My guess is that you might have some CSS or custom code changing its behaviour, which is bringing this issue.
My recommendation would be to try creating a brand new header and see if you still can reproduce this. If not, you can try changing the header to the brand-new one.
Hi @bharatk,
I’m glad you found a way that works for you!
It should still work with other items on the menu, so maybe there are something on how these other header items were added:
Full Size: https://d.pr/i/DKDrhwIf you want to add the “native” format, you can try to add this code instead for the header and only edit over it (keeping the same elements):
<!-- wp:group {"layout":{"type":"constrained"}} --> <div class="wp-block-group"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|40"}}},"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-group alignwide" style="padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:site-title {"level":0} /--> <!-- wp:navigation {"ref":5,"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /--></div> <!-- /wp:group --></div> <!-- /wp:group -->Feel free to get back anytime if you need further help. ??
- The topic ‘How to set full/mobile menu switching & padding’ is closed to new replies.
