Dawn - Dropdown Menu Background Color on Collection Page

Store Design
, , , ,
1

My site: etherealoasis.co

My theme: Dawn

On the collection pages where you can filter results, “Availability” and “Price” both have a black background, but “Best Selling” has a white background and the text is unreadable. It also puts a highlight box around it when clicked that the others do not. I’d like to get it to match “Availability” and “Price”. I’ve attached an image to show exactly what I’m talking about.

Thanks in advance for any help!

dropdown on collection page.jpg
dropdown on collection page.jpg2048×2048 364 KB

2

HI @spacetimerider

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

select#SortBy {

background: black;

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

3

Hello @spacetimerider ,

It’s GemPages support team and glad to support you today.

I would like to give you a recommendation to support you so kindly follow steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1679802128198.png
GemPages_0-1679802128198.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

Let us know how it works for you.

Best regards,
GemPages Support Team

4

Hi @spacetimerider ,

I understand you want to have the select as the same background color as your price and availability. To do so, please follow the instructions below

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the theme.css file
  3. Add the code below at the very end of the file
select#SortBy {
    background: rgb(var(--color-background));
}
5

Thank you. That fixed part of the problem, but it’s still showing the outlines of the box. Any suggestions to make those go away or be transparent?

dropdown on collection page 2.jpg
dropdown on collection page 2.jpg2048×2048 302 KB

6

@spacetimerider

You can try with this code:

.facet-filters__sort:focus-visible {
outline: 0 !important;
outline-offset: 0 !important;
box-shadow: none !important;
}

7

HI @spacetimerider ,

You can remove the box outline by following the instructions below

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the base.css file
  3. Add the code below at the very end of the file
select#SortBy.facet-filters__sort:focus-visible {
    box-shadow: none;
    outline: none;
}