why does my navigation look like this on Tablet?
I see a custom CSS .main-menu {
letter-spacing: 0;
height: 60px;
}
.main-nav {
padding: 0 5px !important;
}
.main-nav__item–primary {
margin: 0 0.9rem !important;
}
how do I fix this on Tablet?
and when I rotate its fine
just up and down its like this
I am looking at Limelush.com and there website does not do that in vertical.
Maybe they have developers for nav and maybe they don’t use shopify, i don’t know
Why isn’t tablet treated like mobile phone with 3 lines
I see Shopruthiegrace.com and they have 3 lines when upright and regular nav when horizontal
Who knows why theme developers choose to do things obviously messed up… and a premium one at that.
I do see this:
Was that something you did? If you find this, try to undo it. I think this is what is breaking it.
I guess the goal was to fit menu on one line, but you can’t really do that if your menu is long.
Maximus is right, this code is one part of the problem:
.main-nav {
flex-wrap: nowrap !important;
}
It forces your top menu items to stay in one line even if the screen is too narrow to properly fit all of them.
To locate it – it’s part of this CSS snippet – probably in Theme Settings-> Custom CSS or can be just a layouts/theme.liquid edit…
.swym-watchlist-app-embed-modal {
display: none;
}
.main-nav { /* this rule */
flex-wrap: nowrap !important;
}
.main-nav {
font-size: 13px !important;
padding: 0 8px !important;
}
Another part is the “Custom CSS” of “Header” section you’ve quoted above:
.main-menu {
letter-spacing: 0;
height: 60px; /* fixes menu wrapper height, cuts half of menu if wraps in 2 lines */
}
Removing both these rules will allow menu to wrap into second line on narrow screens. It is possible that some problems may arise, so you’d need to test your site thoroughly after applying the edit.
I don’t see those codes
this is what I see
.main-menu {
letter-spacing: 0;
height: 60px;
}
.main-nav {
padding: 0 5px !important;
}
.main-nav__item–primary {
margin: 0 0.9rem !important;
}
You’re looking at the “Custom CSS” of the Header section.
You need to check “Custom CSS” under “Theme settings” (cog icon) (most likely).
Or it can be a theme code edit done by someone else?
That worked somewhat, the nav in now bleeding into the first banner but at least its straight on the table in vertical position
I found it in Theme.liquid line 758
As I wrote above:
if my posts is helpful, please like ♡ and mark as a solution -- this will help others find them
So am I to remove this section?
.main-menu { letter-spacing: 0; height: 60px;
OK, that fixed it
I removed the CSS section fold line
Is there a way to make the drop down a horizontal box instead of a vertical one?
Hmm. Do you have an example/sketch of what you want to achieve?
This would (at least) be complex, especially given that some menus are 3 level…
You may try this code to see if it makes sense – may help with very long drop-downs:
@media (min-width:750px) {
.child-nav--dropdown:not(:has(details)):has(li:nth-child(7)) {
columns: 2; /* can try 3 ? */
max-width: none;
}
.child-nav--dropdown > li {
min-width: max-content;
}
}
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
I think I will pass on this request.
Thank you guys for all your help
I have fixed everything for now
