Filter Bar covers calendar when responsive in mobile

[Chuck]

When I look at my website on a mobile device with the Filter Bar in vertical orientation, the calendar is covered up do to the responsive layout of the elements. Is there a way to change this?

[Nico]

Hey Chuck,

Thanks for getting in touch with us! I’ll help you here…

To make the filters not override the calendar but show above it, you can add the following CSS snippet to your theme (or child theme) stylesheet or via Simple Custom CSS plugin:

/* Tribe, prevent mobile filter bar from showing over content */
@media only screen and (max-width: 767px) {
.tribe-filters-open #tribe_events_filters_wrapper.tribe-events-filters-vertical {
position: static;
}
}


Please give this a try and let me know if it works for you,
Best,
Nico

[Chuck]

Now my filter bar collapses and stays collapsed. I would like the filter bar to be open at least on the desktop size.

[Nico]

Thanks for the follow-up Chuck!

Now my filter bar collapses and stays collapsed.

Not sure I understand what you mean can you elaborate a bit on this?

I would like the filter bar to be open at least on the desktop size.

The snippet sent should only affect the mobile layout. You can control if the filter bar initial state (open/closed) in Events > Settings > Filters > Filters Default State
.

Please let me know about it,
Best,
Nico

[Chuck]

I mean just that. The Filter Bar is collapsed, as in I have to now click “show filters” to see the filter bar. In the settings I have set the “Filters Default State” to “opened” yet the bar is closed when I look at the website now.

[Nico]

Hey CHuck,

Thanks for following up!

Please note that the snippet I sent is only affecting mobile views and also that whenever you open or close the filterbar a cookie get saved to remember the last status of the filterbar. To see the ‘default state’ in action you should open the site in a private/incognito mode window. Also, it will closed by default in the mobile view.

Please let me know if the above clarifies a bit, or if I’m not getting this right! In any case, does removing the snippet fixes the ‘second’ issue?

Best,
Nico

[Chuck]

I fully understand what you are saying. However, this is not how it is working. It is like the code is being cached. So once the site goes in to responsive mode, it gets stuck. So after, it only stays with the filter bar closed. Try it yourself and you will see what I mean. Simply open an incognito window, then resize the window. Then maximize the window again and refresh if necessary. You will see that the filter bar now stays closed.

[Nico]

Thanks for following up Chuck! I think we are on the same page now 🙂

I just reproduced what you describe and I can says it’s the default behaviour of the FilterBar and not something particular to the snippet I sent. Please review the screenscast with the test I did https://cloudup.com/cn8VdlpWTnr . What you see is the default behaviour once the site enters the mobile layout the filter bar is closed and that is saved in a cookie just as if would have closed it manually. This behaviour might not be the best for you but I guess site users generally don’t change browser sizes at any point. Most probably mobile visitors see the mobile layout (for which is great that the filter are closed by default) and desktop users will see whatever is set as default state for filterbar.

Please let me know your thoughts on this,
Best,
Nico

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts