Remove extra search filter and layout

  • Posts: 68
  • Thank you received: 10
  • Hikashop Essential
2 years 4 months ago #343402

Dear Hika team,

I have a problem with one page with filters.It concerns this page:

This message contains confidential information

I added filters on that page to narrow down the fagrances based on the ingredients.
They work fine except for the search filter who is supposed to be only on top of every page but it is also displaying near the other filters on that page and I don't know how to get rid of it.

Also I would like to have 5 filters for ingredients but I can not seem to get them next to each other because they are too wide.
So I tried with CSS to make them smaller but nothing happens.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
2 years 4 months ago #343408

Hello,

In order to have required filer entries in different container, more specifically your have 2 container :
1. On the top, the module with the Html Id :
#hikashop_filter_main_div_module_143
2. The filter inside your product listing with the Html Id :
#hikashop_filter_main_div_hikashop_category_information_menu_1476

From this, you will be able to "targeted" the required elements in order to choose to hide (or not) for each case :
With :

.hikashop_filter_ZoekopProductCode_1 {display: none;}
=> Both will be hide
With :
#hikashop_filter_main_div_hikashop_category_information_menu_1476 .hikashop_filter_main.hikashop_filter_main_ZoekopProductCode_1 {
  display: none;
}
=> Only in the product listing.

For the width, we process a little like previous :
With the same container id and by targeting the "select" :
#hikashop_filter_main_div_hikashop_category_information_menu_1476 select {
  width: 195px;
}

Hope this will help you to achieved your display.
Regards

Last edit: 2 years 4 months ago by Philip.
The following user(s) said Thank You: HSD

Please Log in or Create an account to join the conversation.

  • Posts: 68
  • Thank you received: 10
  • Hikashop Essential
2 years 4 months ago #343427

Perfect! Works like a charm.
Thank you very much.

The only thing was that the filters where overlapping on smaller screens so I also added a media query for that. Maybe it will help others who have the same problem.

/*Tablet Query*/
@media only screen and (min-width: 768px) and (max-width:1200px) {
 #hikashop_filter_main_div_hikashop_category_information_menu_1476 select {
  width: 125px;
}
 }

Once the screen gets smaller the filters will collapse.

Thank you Philip. You made my day.

Last edit: 2 years 4 months ago by HSD. Reason: Edit for typo
The following user(s) said Thank You: Philip

Please Log in or Create an account to join the conversation.

Time to create page: 0.064 seconds
Powered by Kunena Forum