A Shopify store owner using the Focal theme sought to remove navigation arrows from their header announcement bar. Customers were mistakenly clicking these arrows on mobile devices, thinking they functioned as back buttons.
Solution provided:
button.tap-area.tap-area--large { display: none; }Outcome:
Hello, we are looking for a code to remove the arrows from our header message (if possible) in Focal theme. Some customers mistakenly click these on mobile thinking they work as a back button.
Photo is attached as an example, our site is https://pondstream.com
Thanks!
Hi @hdkingy
check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
button.tap-area.tap-area--large {
display: none;
}
And Save.
Result:
Worked perfect! Thanks again for a quick solution, Ribe
Hey Ribe,
We noticed when implementing this code that it causes the announcement bar message to be off center on mobile only. Is there anything we can add to the code to fix that?
Apologies, disregard my previous message. We figured it out!
