Improve BuddyPress nav menu design and UX when large number of menu items

Home Forums Cera – Intranet & Community Theme Feature Requests Improve BuddyPress nav menu design and UX when large number of menu items

This topic contains 7 replies, has 3 voices, and was last updated by  Olivier 2 months, 1 week ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #13393

    Sam
    Participant
    • 10 Posts
    @sjregan

    In our BP communities, when a number of BP plugins are activated the nav menu items list width can exceed the available page width causing the menu items to wrap. This doesn’t look as professional as the rest of the Cera theme.

    I would like to see the default styling on this improve.

    Additionally, I would love to see the same kind of handling that the Kleo theme does (creates an additional drop-down menu for the excess menu items).

    I have attached both the Cera and Kleo approaches.

    #13467

    Olivier
    Moderator
    • 1758 Posts
    @themosaurusrex
    Themosaurus Support

    Hi @sjregan,

    Thank you for your great feedback! We really appreciate your will to improve Cera! πŸ˜€

    To be clear, are you referring to the primary or the secondary BuddyPress menu? My understanding is that Kleo seems to handle this the same way as we do. On your screenshots, I see the excess primary BuddyPress menu items wrapped under an extra icon, which is what we do with “…” when the screen is too small (Please see attached.)

    However, you seem to be referring to the secondary BP menu in your screenshots of Cera, the one containing “All members, My Friends, My Groups, Mentions”. Am I correct?

    Thank you.

    #13488

    Andrea
    Participant
    • 108 Posts
    @youfriend

    I was thinking about a sub-menu with only icons and tooltips, it would also be more efficient on mobile

    #13507

    Sam
    Participant
    • 10 Posts
    @sjregan

    @themosaurusrex yes, that is correct, it would be great if you could do something similar for the secondary BP menu as you are doing for the primary BP menu.

    I was just testing out your primary menu navigation and it seems to behave a bit oddly (spacing, z-index, non-responsive). Please see attached screenshots.

    #13529

    Olivier
    Moderator
    • 1758 Posts
    @themosaurusrex
    Themosaurus Support

    @sjregan Thank you for confirming this. Also, thank you for bringing this to our attention. This menu is dynamically created with JS but it seems that it is not reactive enough. I’ve notified our dev team and they will work on some improvement.

    I agree with @youfriend. Displaying only the icons for the secondary menu should look nice on small screens and it is an improvement that we can provide in future releases.

    What do you think guys?

    #13537

    Andrea
    Participant
    • 108 Posts
    @youfriend

    I think will be rlly cool, something like the new facebook style!

    #13553

    Sam
    Participant
    • 10 Posts
    @sjregan

    Icons only could work nicely, there will be a few challenges with it:

    1. Touch screens cannot support tooltips.
    2. Plugins that add new nav menu items would all have the same icon (so setting icons would need to be fully supported in child themes via CSS).
    3. The number of icons may still exceed the available window width on small devices.
    4. Careful design consideration will need to be applied to icons that have an item count and those that don’t – this will easily look odd.

    It would be great if it was configurable, either through WP admin setting or a filter to decide whether to use icons only or same style as primary BP nav.

    #13566

    Olivier
    Moderator
    • 1758 Posts
    @themosaurusrex
    Themosaurus Support

    @sjregan @youfriend Thank you both for you suggestion. I’ll mark this request as “Accepted” and move it to our task list. I cannot disclose any release date as we have a lot on our plates right now.

    Feel free to add more replies to this topic if you have further idea.

    We’ll be back to you with updates on this feature.

    Thank you both for contributing to Cera! πŸ˜€

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

You must be logged in to reply to this topic.