How do I remove these arrows?
Here is the site: https://568839.myshopify.com/
Topic summary
A user needed to remove navigation arrows from product pages on the Focal theme while keeping the navigation dots visible on mobile devices.
Initial Solution:
- First CSS code provided hid the entire
.product__media-navelement, which removed both arrows and dots.
Final Solution:
- Custom CSS targeting specific arrow elements (
.product__media-prev-next) while preserving the navigation dots. - Code added to
assets/base.csswith mobile-specific media query (max-width: 767px). - Includes centering adjustment for the remaining dot navigation.
Status: Resolved. The user confirmed the solution worked as intended.
1 Like
Hello @galleriste
Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.
@media screen and (max-width: 767px) {
.product__media-nav {
display: none;
}
}
1 Like
This also removed the navigation dots. I only want the arrows gone
1 Like
Hello @galleriste
Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.
@media screen and (max-width: 767px) {
flickity-controls.product__media-nav {
justify-content: center;
}
.product__media-prev-next.hidden-lap-and-up.tap-area.tap-area--large {
display: none;
}
.product__media-prev-next.hidden-lap-and-up.tap-area.tap-aera--large {
display: none;
}
}
1 Like
Thanks!
1 Like
Hello @galleriste
You’re very welcome! I’m glad to hear that you’re pleased with the outcome. Please feel free to reach out if you need further assistance.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!