There is arrows + a dot showing through on menu (mobile only) is there a way of fixing this please?
url: https://errival.com/products/errival%E2%84%A2-mini-rubber-band-shotgun
Topic summary
A mobile-only display issue involves unwanted arrows and a dot appearing on the menu.
A CSS solution was provided targeting the product slider buttons and menu navigation elements:
- Add custom CSS to the theme’s main stylesheet (main.css, base.css, style.css, or theme.css)
- The code adjusts z-index values for
.product .slider-buttonsand.menu-drawer__navigationelements - Also sets transparent background for expanded menu icon states
- Changes apply only to screens 749px wide or smaller (mobile devices)
The original poster confirmed the solution worked with emoji reactions, indicating the issue was successfully resolved.
1 Like
Hi @Ryan1998
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
@media only screen and (max-width: 749px) {
.product .slider-buttons {
z-index: 1;
}
nav.menu-drawer__navigation {
z-index: 3 !important;
}
.header__icon--menu[aria-expanded='true']::before {
background: transparent;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
