Hello
on certain screens my menu looks like this
www.thebodyshop.se
please help
Hey @rachelmametbordier,
In order to fix the issue with the responsiveness of the header requires to do the custom coding in your theme file. Could you please share the 4 digits collab code in the p/m so that I can do it for you.
Thanks
Not sure if you have this code in header section Custom CSS styles,
#shopify-section-sections--25432121672011__header > header-component > header > div > div.header__desktop > div.header__desktop__lower > div > nav > div:nth-child(10) {
padding-left: 15px !important;
}
but where ever it it try to add following code:
@media only screen and (min-width: 1148px) and (max-width: 1380px) {
#shopify-section-sections--25432121672011__header > header-component > header > div > div.header__desktop > div.header__desktop__lower > div > nav > div:nth-child(10) {
padding-left: 35px !important;
}
.navlink--toplevel {
padding: 10px 10px;
margin-top: 15px;
}
}
it should sort it out.
Let me know if you have some questions.
Hello @rachelmametbordier
- From your Shopify Admin, navigate to Online Store > Themes > Edit Code
- In the Assets folder, open base.css and add your CSS code at the end
@media screen and (min-width: 1100px) and (max-width: 1200px) {
a.navlink.navlink--toplevel {
padding: 15px 9px 14px 10px!important;
}
}
1 Like