Filter Bar can be set up with a vertical or a horizontal layout. When using the horizontal layout, you can choose the default state: “collapsed until opened” or “show already on page load.”
On a smaller screen, however, to save screen space for the content, Filter Bar is hidden by default. There is no built-in setting to change this.
In case you would like to have Filter Bar open by default on mobile as well, then the following snippet will do the trick.
<?php
/**
* Open the Filter Bar on mobile on initial pageload.
*
* By default, Filter Bar is closed on mobile regardless of the setting.
* With this snippet Filter Bar will show on pageload when using the horizontal setup.
*
* Usage: Add the snippet to your functions.php file or with a plugin like Code Snippets.
*
* @author: Andras Guseo
*
* Plugins required: The Events Calendar, Filter Bar
* Created: January 19, 2024
*/
function tec_open_filterbar() {
echo '<script>
let fbSelector = document.querySelector(".tribe-filter-bar.tribe-filter-bar--horizontal");
if(fbSelector != null) {
fbSelector.classList += " tribe-filter-bar--open";
fbSelector.style.position = "unset";
}
</script>';
}
add_action( 'wp_footer', 'tec_open_filterbar' );
Source: https://gist.github.com/andrasguseo/a22cbb1917c98a9fbf5a47c012b37d76
Copy-paste this code into your child theme’s functions.php file, or better, use a plugin like Code Snippets.
(You can read more about this topic in our Using Custom Code Snippets article.)