Support only during business hours : Monday to friday, from 8:30 am – 5:30 pm CEST

Due to the decrease in our staff due to vacations, our response time may be longer.

Be sure we're doing our best to manage your topic as soon as possible.

Adv search filter clashes with mobile UI

This topic is resolved
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    On mobile (www.gymn.com.au) the advance search filter on home screen clashes with the swipe deck of cards. How to separate this? It is very difficult for users to select the adv search filter.

    Secondly, how to make text appear above the search filter. The icon is difficult to be identified. I want to add next to it ‘toggle search’ or something to indicate its function.

    Themosaurus
    Keymaster
    Themosaurus Support
    • 1 Topics
    • 1675 Posts
    @themosaurus

    Hi @abourne,

    Can you please provide us with screenshots of your website? Please don’t hesitate to comment or highlight your screenshots to help us better understand your issue.

    Best regards,

    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne
    Themosaurus
    Keymaster
    Themosaurus Support
    • 1 Topics
    • 1675 Posts
    @themosaurus

    Hi @abourne,

    Normally, the filter is only compatible with the default member view (*/members) and not the Swap view (*/members-swap).
    I suppose you have set the “members-swap” page as the page to receive the search filters.

    Unfortunately, we cannot guarantee the functioning of these two coupled features. Only the filters with the classic directory (*/members).

    Nevertheless we can create a CSS snippet that could visually improve the display of the filters.

    Can you please create a new website user for us? If possible with administrator capabilities so we can create this snippet directly on your site ?
    You can post the user name and password in your next private reply.

    Cheers,

    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne
    This reply has been marked as private.
    Themosaurus
    Keymaster
    Themosaurus Support
    • 1 Topics
    • 1675 Posts
    @themosaurus

    Hi @abourne,

    To change this, simply add the following code snippet to your website:

    /* Better display for filters on member Swap view */
    .buddypress.directory.members #buddypress div.item-list-tabs.bps_header {
        position: relative;
        z-index: 9999;
        top: 20px;
        left: 0;
        right: auto;
        width: 100%;
        transform: none;
        text-align: center;
    }
    @media screen and (min-width: 768px) {
    	.buddypress.directory.members #buddypress div.item-list-tabs.bps_header {
    	    top: -10px;
    	}
    }
    .buddypress.directory.members #buddypress div.item-list-tabs.bps_header > ul {
        display: inline-block;
    }
    .buddypress.directory.members #buddypress div.item-list-tabs.bps_header > ul > li.last {
        width: auto;
        max-width: none;
        height: auto;
        padding: 0;
    }
    .buddypress.directory.members #buddypress div.item-list-tabs.bps_header > ul > li.last:before {
        content: none;
    }
    .buddypress.directory.members #buddypress div.item-list-tabs.bps_header > ul > li.last input {
        display: block;
        position: static;
    }

    To add this code snippet to your site, we recommend that you paste it to the Custom CSS panel of your WordPress Customizer. Just go to your dashboard and navigate to “Appearance > Customize > Additional CSS”.
    Pasting your code snippet there should do the trick for you.

    We hope this will solve your issue. ?

    All the best,

    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    Great solution. Worked a charm. Appreciate your help and hope that it helps many more clients in the future 🙂

    Themosaurus
    Keymaster
    Themosaurus Support
    • 1 Topics
    • 1675 Posts
    @themosaurus

    You’re welcome. ?

    We also believe that the snippets we create for specific cases can also be useful for other users.
    We plan to create theme options (WP Customizer) for some of these snippets and list the others (more situation-specific) in our documentation. It will take a little time, but it is worth it!

    Thanks again for your feedback alex.

    Best regards,

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Adv search filter clashes with mobile UI’ is closed to new replies.

Troubleshooting Demo Imports

You're trying to setup your theme but you're experiencing errors when importing the demo content? Or you've just followed the setup guide but your website doesn't look exactly like our demo? These are common issues for which you can find easy and quick fixes.

Happy With our Support So Far?

Feel free to review our theme on Themeforest! It helps us making our products more known to new potential customers, which allow us more time to improve the quality and develop new features. #SharingIsCaring ❤️

Discover MatchPress

Skip • Like • Super-Like

Add powerful matching features like Member likes, skips, super likes, conditional private messaging and much more.

Setup Your Cera or Gwangi powered Community Website and Turn it into an iOS and Android App

15% discount for Cera users

To unleash the full power of your Cera or Gwangi theme, we have partnered with the Zipline team. Your community website can now be fully setup and turned into your very own custom app for iOS and Android.

Whether you've newly acquired the theme or already got your site up and running, Zipline got you covered. And we got you an incredible discount.

Holiday, Weather & Festive effects
to pimp your WordPress Site