need some css help to style filter/sort menus

[ad_1]

Hello! I love your plugin. I have been looking for a reliable tool that can display both filtering and sorting menus the way I want for a long time. I have tested out some plugins and I was not satisfied with them. Glad to have found this!

I have managed to get so far (screenshot 1). But I have trouble setting everything up the way I want. The menus are now stacked. And in mobile view, the width of the menus is messed up.

I am using shortcode for the product categories filter menu + the search filter, in my shop page.
For the sorting filter, too (after adding the widget to my inactive widgets area since I don’t have a header widget area in the theme I’m using).

I was hoping someone could help me out by pointing me in the right direction. I have a very basic understanding of css, and know how to inspect elements in Devtools, but that’s about it.

I have grouped related questions in one thread. I hope that is ok.

This is the css I added to my (childtheme) stylesheet.
As you can see, I am using the width: 20% code. I think this is not the right way to achieve this. Width of the menus is ok on desktop, but not in a mobile browser. I would like the menus to have the same width, in every browser.

.select2-container--default .select2-selection--single {
    background-color: transparent !important;
	color: #fff;
    border-style: solid;
	  border-color: #444444 !important;
	
	
    
}

.select2-container {
width: 20% !important;
}

.wpc-search-field {
    width: 20%;
	background-color: transparent;
	color: #fff;
    border-style: solid;
	  border-color: #444444 !important;

}

  1. How can I align the menus horizontally? (And change the order in which they appear?)
  2. How does one remove the search box from the (product) filter at the top of the dropdown menu list? => screenhot 2
  3. How can I change the background colour of the expanded dropdown menu items? The standard background colour (collapsed) and hover colour I managed to change. => screenhot 2
  4. How can I move the search icon in the search filter to the right?
    => screenshot 3

    Thanks in advance for helping me out!
    Levi

  • This topic was modified 1 hour, 5 minutes ago by evillevi.

The page I need help with: [log in to see the link]

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer