Fix product page menu
All my other menus are fine, but for some reason when I visit the product page, the menu breaks like this. Can someone please help?
Theme is spotlight. Thank you.
Hi @vagantry
Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
{%- if template.name contains 'product' -%}
<style>
header-drawer {
justify-self: start;
margin-left: -1.2rem;
}.scrolled-past-header .header__heading-logo-wrapper {
width: 75%;
}@media screen and (min-width: 990px) {
header-drawer {
display: none;
}
}.menu-drawer-container {
display: flex;
}
.list-menu {
list-style: none;
padding: 0;
margin: 0;
}
.list-menu--inline {
display: inline-flex;
flex-wrap: wrap;
}
summary.list-menu__item {
padding-right: 2.7rem;
}
.list-menu__item {
display: flex;
align-items: center;
line-height: calc(1 + 0.3 / var(--font-body-scale));
}
.list-menu__item--link {
text-decoration: none;
padding-bottom: 1rem;
padding-top: 1rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
}
@media screen and (min-width: 750px) {
.list-menu__item--link {
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
}
</style>
{%- endif -%}
Hi @vagantry
Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
{%- if template.name contains 'product' -%}
<style>
header-drawer {
justify-self: start;
margin-left: -1.2rem;
}.scrolled-past-header .header__heading-logo-wrapper {
width: 75%;
}@media screen and (min-width: 990px) {
header-drawer {
display: none;
}
}.menu-drawer-container {
display: flex;
}
.list-menu {
list-style: none;
padding: 0;
margin: 0;
}
.list-menu--inline {
display: inline-flex;
flex-wrap: wrap;
}
summary.list-menu__item {
padding-right: 2.7rem;
}
.list-menu__item {
display: flex;
align-items: center;
line-height: calc(1 + 0.3 / var(--font-body-scale));
}
.list-menu__item--link {
text-decoration: none;
padding-bottom: 1rem;
padding-top: 1rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
}
@media screen and (min-width: 750px) {
.list-menu__item--link {
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
}
</style>
{%- endif -%}
Community Blog Articles
In Canada, payment processors, like those that provide payment processing services t...
By Jacqui Mar 14, 2025
Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025
Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025