Filter Bar Does Not Display on Mobile

Home Forums Calendar Products Filter Bar Filter Bar Does Not Display on Mobile

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1265000
    Annie Tandy
    Participant

    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,
    Annie

    #1265860
    Courtney
    Member

    Hi 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 🙂

    #1266089
    Annie Tandy
    Participant

    The 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.

    #1266695
    Courtney
    Member

    Hello 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 🙂

    #1276300
    Support Droid
    Keymaster

    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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Filter Bar Does Not Display on Mobile’ is closed to new replies.