Removing scroll bar from the announcement header

Store Design
,
1

Hi,
I need help removing the scrollbar from my announcement header. I

want it to scroll automatically, but not have the navigation bar. The arrows are ok.
I am using the refresh theme.

Annoucement Bar
Annoucement Bar1887Ă—102 4.07 KB

2

Hey,

Can you share site url so that I can help with. Thanks

3

www.acushop.co.nz

Thank you

5

You have some broken code in your <head> :slight_smile:

Screenshot 2026-03-09 at 1.09.35 PM
Screenshot 2026-03-09 at 1.09.35 PM961Ă—199 42.8 KB

See how opening <script> does not have a closing </script> buddy and instead there is a <link ...> element?

Therefore this script does not run. It does not replace the no-js class on the <html> with js and several elements have styling as if they run in a browser without Javascript.

Quick fix is to open your layouts/theme.liquid and change first line from

<html class="no-js" lang . . .

to

<html class="js" lang . . .

Proper fix would be to restore the code so that the script runs, but it is necessary to see it to suggest the fix.

You can share a top part of the layout file (above the </head> tag) here, just use the </> button or forum engine will mangle the code.

6

Dear @Summertime

Please follow these steps to resolve the issue:

Step 1: Access the Theme Code Editor

First, you need to enter the “engine room” of your Shopify store.

  1. Log in to your Shopify Admin.
  2. Navigate to Online Store > Themes.
  3. Find your current live theme, click the three dots (…) icon next to the “Customize” button, and select Edit code.

Step 2: Locate your Global Stylesheet

Most modern Shopify themes (like Dawn or other OS 2.0 themes) use a central CSS file.

  1. Under the Assets folder in the left sidebar, look for a file named:
  • base.css (Standard for Dawn/Free themes)
  • theme.css or global.css
  • styles.scss.liquid (For older themes)
  1. Click to open the file.

Step 3: Insert your Custom CSS

Scroll to the very bottom of the file. It is best practice to add a comment line so you can easily find your edits later.

...
.announcement-bar .announcement-bar-slider.slider-buttons div {
    overflow: hidden !important;
}
...

image
image1917Ă—877 218 KB

Regards,
Eric from Shopplaza

7

hey @Summertime try this one by follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution

<style>
div#Slider-sections--16007375847487__announcement-bar {
    scrollbar-width: none !important;
}
</style>

image
image1267Ă—865 189 KB

8

Hi @Summertime,

Hope you are doing well.

  1. Go to your Shopify admin and open the Code Editor.

  2. Search for the file named: component-slider.css

  3. Scroll down to Line 240 (as highlighted in your screenshot).

  4. You will see the following block of code

  5. .no-js .slider {
   -ms-overflow-style: auto;
   scrollbar-width: auto;
}

  6. comment this line: scrollbar-width: auto;

    image
    image1392Ă—629 255 KB

    Thanks!