Dawn - Remove announcement bar mobile buttons

Store Design
1

Hello guys, im trying to figure out why the announcement bar mobile buttons are not being removed when i add this code to base.css

.slider-button--next .icon {
  display: none !important; 
}
.slider-button--prev .icon {
  display: none;
}

But the same code modification (display: none;) under the original file (component-slider.css) will work fine and remove the buttons

.slider-button--next .icon {
  transform: rotate(-90deg);
  display: none;
}

.slider-button--prev .icon {
  transform: rotate(90deg);
  display: none;
}

Website: Dazzilia.com
Thank you!

2

Try this. it will work!

@media (max-width: 991.98px){

.announcement-bar-slider.slider-buttons > .slider-button {

display: none;

}

}

3

Hey @TerenceKEANE i tried, but it did not work.

4

How exactly are you doing it? Do you enter the theme’s CSS settings? I just tried again and I’m sending you the screenshot below. But some themes are very problematic and buggy. If done correctly, it will look like the one below. Also, if you can add code in the part of the software, you can try pasting the code with tags?

Screenshot 2024-02-06 193647.png
Screenshot 2024-02-06 193647.png652×471 188 KB

5

@TerenceKEANE i just copied and pasted the code you gave in base.css

Dabou_0-1707226078981.png
Dabou_0-1707226078981.png1356×550 75.5 KB

6

How strange. I’ve tried it for the third time and it still seems to be working. It must be a different issue related to the theme! Another solution that comes to mind is, if you have access to the tag, you can try adding them again within tags and clearing the cache. Or if the theme gives you access to the HTML code inside the header section, you can try the same there.