Hi everyone
I need help for the main menu to be " one line " in a tablet version
how can I adjust this ?? Thank you so much
website : www.oscarliving,co.id
Empire 11.1.3
Here is what it looks like on Tablet
and this is what I want
Topic summary
A user is experiencing a menu layout issue on tablet devices where navigation items wrap to multiple lines instead of displaying in a single horizontal row. They are using the Empire 11.1.3 theme.
Problem: The main menu breaks into multiple lines on tablet view (shown in attached screenshot).
Desired outcome: Menu items should remain on one line (reference screenshot provided).
Solution provided:
- A CSS code snippet was shared to reduce font size and padding for navigation links on tablet screens (1024px-1200px width)
- Initial attempt to add code to theme.css didn’t work
- Resolution: The code successfully worked when added to the custom CSS header section instead
The issue appears to be resolved, though the user initially struggled with code placement before finding the correct location.
2 Likes
Hello @OLIV1
- From your Shopify Admin, navigate to Online Store > Themes > Edit Code
- In the Assets folder, open theme.css and add your CSS code at the end
@media (min-width: 1024px) and (max-width: 1200px) {
.site-navigation .navmenu-link-depth-1, .site-navigation .site-header-account-link a {
font-size: 13px!important;
padding: 12px 5px;
}
}
Hi devcoders
Thank you for responding me
I tried This code , the code did not bring any change
Hi devcoders
But if I put in custom ss header it work. what do you think >>
1 Like
Hello @OLIV1
Thank you for getting back to me. I’m happy to hear that it worked for you. Should you need any further help, please don’t hesitate to reach out. If you found the post helpful, kindly consider giving it a like.
Hi Lezky
My theme is Empire 11.1.3
1 Like