Responsive Filter Bar

[Thomas]

Hello,

When you have the Vertical Filter Bar set to populate as expanded by default, is there a way to get the filter to populate as collapsed on mobile devices? We noticed that the filter shows up as expanded on mobile devises and when it does, the calendar is hidden until the filter is collapsed. At first we thought it was an bug, then realized this was by design. We believe that mobile visitors will be as confused as we were. We would still like the filter to, by default, be expanded on the regular version of the site.

Additionally, is it possible to prevent the calendar from disappearing on mobile devises when the filter is expanded?

Thank you for your help

[Geoff]

Hey Thomas, thanks for getting in touch!

Having the Filter Bar collapse specifically on mobile devices is a great idea! I’m afraid there is no setting or snippet available to make that happen, but it seems like something that would be possible with custom development. The filters state is controlled by Javascript and toggles CSS classes. You could likely toggle the state if you are comfortable with a little bit of jQuery — we also have a list of freelancers available who might be able to help as well.

Sorry I don’t have a concrete solution for you here, but will this at least help you get started? Please let me know.

Thanks,
Geoff

[Thomas]

Thank you for your reply.

Alternatively, is it possible to prevent the calendar from disappearing on mobile devises when the filter is expanded?

Thank you,

Tom D.

[Geoff]

Hey Tom, thanks for following up!

Try adding this to your theme’s style.css file or by using the Simple Custom CSS plugin:

#tribe_events_filters_wrapper.tribe-events-filters-vertical {
position: relative;
}

That seemed to do the trick for me. In other words, it allows both the Filter Bar to be open and the calendar to display as well — at least when I tried it using the default WordPress Twenty Sixteen theme. Hopefully it does the trick for you too!

Cheers,
Geoff

[Thomas]

This reply is private.

[Geoff]

This reply is private.

[Thomas]

What can I say. Your the man…

Thanks for the help!

[Geoff]

It’s my absolute pleasure — happy to help! Definitely let us know if any other questions pop up down the road. 🙂

Cheers,
Geoff

[Author]

Posts