- This topic has 3 replies, 2 voices, and was last updated 3 years, 12 months ago by
.
-
Posts
-
Hi,
I’m setting up GPP (using Niche) with WooCommerce.
I want to have the Primary Navigation, when viewed on mobile, show the desktop style menu (words always visible) rather than the mobile style menu (button to reveal menu). I realise there’s not much room on mobile but I only have a small number of menu items. To force the standard menu on mobile, I did this:
Customize – Layout – Primary Navigation
Mobile Menu Breakpoint: 0On desktop I’d like:
Menu Item Width: 40
to give some generous space.On mobile I’d like:
Menu Item Width: 20
so it will fit and not drop down a line.And I understand I can set these separately by toggling between the desktop and mobile buttons placed right above that setting.
The settings seem to successfully “stick”. In other words, after hitting publish, I can come back later and and toggle between the two and see 40 and 20 respectively.
But, the settings for mobile are ignored.
The mobile view only behaves according to the desktop setting! So if the desktop setting for width is 40, the mobile view uses that and I get the ugly spill over to the next line. If the desktop setting for width is 20, the mobile view uses that and looks good.
But I don’t want to use 20 for the desktop setting. They are supposed to be independently adjustable.
Can anyone tell me what I might be doing wrong?
Thanks,
RichardLead Developer
Hi there,
That’s happening because the media query is now not triggering due to the mobile menu breakpoint option.
Try this CSS:
@media (max-width: 768px) { .main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a { padding: 0 20px; } }Let me know 🙂
Hi Tom,
It worked well.
Thanks!You’re welcome 🙂
- You must be logged in to reply to this topic.