- This topic has 11 replies, 3 voices, and was last updated 2 years, 1 month ago by David.
-
AuthorPosts
-
March 3, 2022 at 2:03 am #2140465Albert
Hello, I would like to know if it is possible to make a menu like this (keeping the desktop one) in the mobile version:
https://wpjohnny.com/wordpress-themes/
Thank you
March 3, 2022 at 2:12 am #2140472DavidStaffCustomer SupportHi there,
go to Customizer > Layout > Primary Navigation and set the Mobile Menu Breakpoint to
0
( zero )March 3, 2022 at 2:32 am #2140482AlbertPerfect! Can you get the entire menu to be on one line where you can scroll horizontally?
March 3, 2022 at 2:42 am #2140493DavidStaffCustomer SupportMaybe … can you share a link to your site where i can see your menu?
March 3, 2022 at 2:43 am #2140494AlbertMarch 3, 2022 at 4:16 am #2140602DavidStaffCustomer SupportYou can try this CSS:
@media(max-width: 1024px) { .main-navigation .main-nav { overflow-x: auto; } .main-navigation .main-nav>ul { flex-wrap: nowrap; min-width: 1050px; text-align: center; } .main-navigation .main-nav>ul>li { flex: 1 0 150px; } }
Theres a couple of factors to consider here:
1. This line:
flex: 1 0 150px;
sets the menu items to all 150px wide.
2. This line:min-width: 1050px;
forces the menu to a min width based on the Number of menu items ( 7 ) * the menu item width ( 150px ).March 3, 2022 at 4:24 am #2140610AlbertI am trying to modify the width of the Menu item in the mobile version from the Generatepress options (Design – Main Navigation) but the number I put does not respect me. That could be happening?
March 3, 2022 at 4:49 am #2140642DavidStaffCustomer SupportThats because of:
1. This line: flex: 1 0 150px; sets the menu items to all 150px wide.
That line forces the width to be 150px regardless.
If you want to reduce it for mobile then add this:@media(max-width: 768px) { .main-navigation .main-nav>ul>li { flex: 1 0 120px; } }
Adjust the 120px to suit your needs.
March 3, 2022 at 9:31 am #2141164AlbertI’m sorry, but I’m trying to change the width of the menu items in their mobile version, but I’m entering a number and it doesn’t work.
What do you think might be wrong? attached screenshot
March 3, 2022 at 11:32 am #2141323YingStaffCustomer SupportHi Albert,
That’s because the mobile breaking point is set to 0, so no matter how narrow the screen is, the system still thinks it’s on desktop.
So the settings for mobile won’t work in this case.
March 4, 2022 at 1:48 am #2141858AlbertI set the breakpoint to 0 following David’s instructions. So there is no way to fix it?
March 4, 2022 at 4:40 am #2142021DavidStaffCustomer SupportYou will need to use CSS – which looks like this:
@media(max-width: 768px) { .main-navigation .main-nav>ul>li { flex: 1 0 120px; } .main-navigation .main-nav ul li a { padding-left: 10px; padding-right: 10px; } }
This property:
flex: 1 0 120px;
Sets the ideal width of each item in this case that is 120px.
The next rule:
.main-navigation .main-nav ul li a { padding-left: 10px; padding-right: 10px; }
Is what the Customizer spacing does – so instead of using the customizer you set the left and padding values in CSS.
-
AuthorPosts
- You must be logged in to reply to this topic.