Home › Forums › Calendar Products › Filter Bar › Filter Bar Does Not Display on Mobile
- This topic has 5 replies, 2 voices, and was last updated 6 years, 11 months ago by Annie Tandy.
-
AuthorPosts
-
April 5, 2017 at 7:33 am #1265000Annie TandyParticipant
My filter bar is not showing at all on mobile, which is a bummer since the majority of my readers are on mobile now. It looks a little strange because my “submit an event” button is covered by an unnecessary blank band of gray. Any idea what the problem is? I love the functionality of the filter bar, but don’t think anyone knows they can filter the events, so I feel like I’ve been wasting my money! I would like to figure this out. 🙂
Thanks,
AnnieApril 6, 2017 at 6:42 am #1265860CourtneyMemberHi Annie
Can you try adding this CSS code to your child theme or to Appearance » Customize » Additional CSS?
.tribe-bar-disabled #tribe-bar-form { margin-top: 40px; }
Let me know if that works for you.
Thanks,
Courtney 🙂April 6, 2017 at 10:58 am #1266089Annie TandyParticipantThe blank, light gray bar is now dark gray and says “Show Filters” but when I click on (touch) it, it turns white and there’s nothing there. So a step in the right direction maybe? But didn’t solve the problem.
Thanks for you help. Let me know if there’s something else I can try.
April 7, 2017 at 10:56 am #1266695CourtneyMemberHello Annie
To get the filterbar to work with your theme well on mobile, try this CSS code:
/** The Events Calendar Fixes for Tribe Filters on mobile */@media only screen and (max-width: 420px) {
#tribe-events-content-wrapper {
margin-top: 20px;
position: relative;
}.tribe-filters-closed.tribe-bar-is-disabled #tribe_events_filters_wrapper.tribe-events-filters-horizontal,
.tribe-filters-closed.tribe-bar-is-disabled #tribe_events_filters_wrapper.tribe-events-filters-vertical {
margin: 40px 0 0 0;
}.tribe-filters-closed .tribe-events-filters-content {
background: #f5f5f5;
border-left: 1px solid #f5f5f5;
border-right: 1px solid #f5f5f5;
}.tribe-bar-disabled {
top: 40px;
}.tribe-filters-closed .tribe-events-filters-content {
margin-top: 20px;
}#tribe-events-content {
margin-top: 60px;
}.tribe-filters-open #tribe_events_filters_wrapper,
.tribe-filters-open #tribe_events_filters_wrapper.tribe-events-filters-horizontal,
.tribe-filters-open #tribe_events_filters_wrapper.tribe-events-filters-vertical {
top: 40px;
z-index: 200;
}
}
Let me know if that works for you.
Thanks,
Courtney 🙂April 29, 2017 at 9:35 am #1276300Support DroidKeymasterHey 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 -
AuthorPosts
- The topic ‘Filter Bar Does Not Display on Mobile’ is closed to new replies.