Issue: On iPad, the main menu in the Horizon theme renders much larger than intended, while it appears correct on laptop and mobile.
Observed behavior: The attached screenshot shows the oversized menu specifically on iPad. Other devices display the menu at the expected size.
Troubleshooting done: Multiple adjustments were attempted; the user even removed the main menu and logo from the section, but the problem persisted and nothing seemed to fix it.
Request: The poster asks whether others have experienced the same issue and seeks guidance on how to resolve it.
Context: The discrepancy suggests a tablet-specific layout or styling difference, though no technical diagnosis is provided in the thread. The image attachment is central for understanding the visual issue.
Status: No solution or consensus yet; the discussion remains open with no confirmed fix or next steps shared.
Good evening,
I’m reaching out because I’m completely blocked on one issue: the main menu size (Horizon theme) on iPad. As you can see in the attached picture, the menu looks perfect on both laptop and mobile. However, on iPad, the menu becomes much larger. I’ve tried several adjustments, and even removed the main menu and logo from the section, but nothing seems to fix it.
Has anyone experienced the same issue?
Thank you in advance for your help.
Link: brainelements. fr
Does your iPad has recent (preferably latest) IOS?
Horizon family of themes use newer Javscript features which are not supported on older OSes.
This is the most probable cause.
Horizon theme does use some newer JavaScript features, but those typically affect:
animations
sliders
sticky headers
dynamic layout adjustments
NOT static CSS sizing of the header/menu.
So an outdated iPad could break some functionality, but it would not cause only the menu to appear oversized while the rest works normally.
If the JavaScript was failing due to old iOS, you would see things like:
Sticky header not working
Mobile menu not opening
Sliders not loading
Buttons unresponsive
Not just “menu bigger on iPad.”
@Michross Nope, you are wrong.
If you’re not aware, Horizon actively trims the menu to fit on one line. This is obviously done with JS and if it fails, you get this mess.
And it’s just one area how JS affects Horizon menu
Also nothing was said about “rest working properly”
The header has a special breakpoint specifically for tablets (768–1024px) that is different from both mobile and desktop.
So even if the menu looks perfect on phone and laptop, the iPad layout loads its own CSS rules.
Add this CSS to your theme.css (or “Custom CSS” in Theme Settings → Customizations → CSS):
/* iPad / tablet header fix for Horizon theme */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* Reduce header height */
header.site-header,
.header,
.header__wrapper {
height: auto !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* Fix oversized menu */
.header__menu,
.header__navigation,
.menu,
.menu--main {
transform: none !important;
scale: 1 !important;
padding: 0 !important;
}
/* Reduce logo scaling on tablet */
.header__logo img {
max-height: 45px !important;
height: auto !important;
}
}
Try this out and let me know if anything changes
If this is the only thing affecting the header, you should be able to replicate this on your desktop by narrowing the browser window, but this does not happen:
And adding your CSS on older iPad OS does not help at all (you know about XCode Simulator, right?):
Hi and sorry for late reply.
It is the free theme “Horizon” available on Shopify store.
You are right, it is an ipad from 2016 and I don’t believe I have the latest IOS version
Do you mind if I come in and aid you out, save you the hassle.
