Problem display different from desktop to mobile

Dear Oivalf,

You are always welcome to contact us with any difficulty that you may face during the plugin set up! Feedback like that helps us make the plugin better, and the solutions that we post here on the forum can help other users that face similar problems ??

In the particular case of your (.com) site where you try to set up the hybrid Visibility mode in the sidebar of Neve theme, the problem comes from the theme’s underlying CSS: its sidebar gets hidden in mobile views, that is why the filters are not visible. Unfortunately, there is no universal solution for this one, unless you can find and disable the relevant setting in your theme options. The only workaround is to declare custom CSS rules that would override your theme’s CSS. Try adding this in annasta Filters > Style settings > Custom CSS:

.awf-togglable-preset-on .nv-sidebar-wrap.shop-sidebar{opacity:1;pointer-events:initial;}
.awf-togglable-preset-on .awf-togglable-preset-btn{display:none;}

Good, you have solved another step, last one:

Now the filter button function perfectly after last CSS, but in mobile float while I scroll the page, there’s a way to fix it ?

Hello Oivalf,

I’m glad to hear that the adjustment CSS rules for Neve theme mobile sidebar worked!

As for the floating “Filters” button, you can disable it with the help of the Fix page position option that you will find in annasta Filters > Plugin settings > “Filters” toggle button settings section of your WP admin.

After you disable the button’s fixed page position, it should get auto-inserted above the products list. If you wish to adjust its insertion point, please use the instructions provided in the documentation article of the Position before custom selector option.

So…. using the function.php modification that u suggested me here: ?Position before custom selector AND disable the fix position worked fine AFTER i delete this part of CSS:

.awf-togglable-preset-on .nv-sidebar-wrap.shop-sidebar{opacity:1;pointer-events:initial;}
.awf-togglable-preset-on .awf-togglable-preset-btn{display:none;}

That function with fixed position.

As you can see now the filter button is showing under the menu and above the products list.

I’m quite happy, I ask u a last effort please:
1) It is possible to move the filter button at the same orizontal position of
the hamburger menu in mobile without made it floating around ?
2) I will show the filter button even in the product page, I’ve select “Shop Pages” so I’ve imagined that it will have appeared in the product pages as well, but it has not.

Hello again?Oivalf,

Good catch, you were absolutely right to remove the custom CSS related to the popup sidebar after changing the “Filters” button mode!

As for your questions:

1. Setting the Position before custom selector setting to .builder-item–nav-icon could probably work in the previously set popup sidebar “Filters” button mode However, if you do that in the current ‘under the “Filters” button’ mode, the filters’ display will probably be rather scrambled.
   By the way, please also look into adjusting the Responsive width setting (most likely to 960), this would put the button behavior more in sync with the rest of your site settings.
2. The official answer to your second question is that the “Filters” button is currently programmed to appear on filterable pages only.
   
   If you absolutely need to introduce it to non-filterable (single product) pages, there is a hack that I heard is being used on some sites, so let me post it here in case you or other users are interested in trying it. Before I do that, I would like to highlight that this is NOT the supported way and needs to be thoroughly tested, because some filtering options may not work on non-filterable pages and we will not be able to provide support for such cases!
   
   The hack can be applied by adding the the following snippet in annasta Filters > Plugin settings > Custom JavaScript field:

jQuery( document ).on( 'awf_after_setup', function( $ ) {
  if( 'redirect_ajax' in awf_data ) {
    awf_data.togglable_preset.insert_btn_before_container = '.builder-item--nav-icon';
    a_w_f.setup_togglable_preset();
  }
});

Notes:

• The insert_btn_before_container value needs to be set.
• This will only work in the Display preset filters in a left popup sidebar “Filters” button mode.

Thank you, I’ll try and see what happens.