Archived topic
Fix menu 'horizontal shape and one line' in mobile view of marketer theme
7 replies · Started by hiso on August 7, 2022
Hi,I am using the marketer theme. I'm trying to fix the site's primary menu being double-lined when my site is viewed in the mobile version. I don't want two lines, I want the menu to be aligned horizontally, one line and scroll to the right when viewed on mobile. I've tried various plugins, etc., but I can't get the look I want. I am new to dealing with css. But I'd appreciate it if you could tell me how.
Hi Hiso,
Can you provide the link to the site in question?
You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Thanks for the reply. I have attached a link to the site. When I set the Mobile Menu Breakpoint to 410 in the Primary Navigation tab, the categories in the mobile view are expressed with more than 3 lines. I want to express the menu in the mobile view one line, horizontally. I also want the menu to be able to scroll horizontally to the right. I look forward to your reply, thank you.
This is what I’m seeing from my end: https://share.getcloudapp.com/llu0G6bd
There’s no lines yet. Am I looking at the right place? Is this the menu you’re referring to?
When I go into 'Custom' of the theme, it looks like a picture attached as 'Link' to me. When the mobile view is shown to me, the menus spread over 4 lines, taking up a lot of width to the bottom.
Oh I see. To clarify, do you want to display it horizontally on 410 px?
You can try adding this CSS in Appearance > Customize > Additional CSS:
@media (max-width: 410px) {
div#primary-menu {
overflow: scroll;
width: 100%;
}
div#primary-menu > ul[aria-hidden="false"] {
display: flex;
flex-wrap: nowrap;
}
div#primary-menu > ul[aria-hidden="false"] > li {
width: unset;
white-space: nowrap
}
}Yes. I want all the menus in the mobile view to be displayed horizontally in a row, and the break point is when I set 410px.. But despite adding the css, I still get a menu with more than 3 lines.. Could the css not work issue be with the child theme? My homepage is only temporary anyway, so I can provide login information. if it's not rude, can you log in and tell me what's the problem with the css not working, or can you add some css? If this is difficult, please feel free to provide me with another method. thank you
It seems to be working as expected in the frontend: https://share.getcloudapp.com/OAu8A85v
The mobile view in the customizer is set by WordPress. It’s default is 768px which is why it isn’t appearing horizontal there.
