Titlebar menu disappears on small screens

[Atma]

The Titlebar menu disappears completely on small screens. I tried it on Android, iPhone, tablet and on my computer (by resizing the browser window).

On my computer, it first compresses to three dots (…) as the window size is reduced, but then it disappears completely as the window size gets even smaller. On mobile devices, the titlebar menu doesn’t show at all. This is true of your demo site, and my own site too.

Makes me think that this is what you intended it to do.

I’m using the titlebar menu as my main menu, so for it to disappear through responsiveness is a problem.

[Alyssa]

@tintomatoes just like on other mobile themes the menu is hidden by default on smaller screens. Select the top left icon of 3 dashes and the menu displays. Does that make sense?

[Atma]

On small screens, selecting the top left icon of 3 dashes shows the BuddyPanel menu, not the Titlebar menu.

See in your demo site – you have ‘Buy now’, ‘Members’, ‘Activity’ all iin the Titlebar menu but not in the other menus. How are you meant to access these links on a small screen if they only appear in the Titlebar menu?

[Alyssa]

@tintomatoes sorry, I’m still learning the theme. This is by design. There just isn’t enough room on mobile to display this information. Where would you have this menu displayed on mobile…perhaps I can pitch something to the developers.

[Atma]

Hmm… that’s an odd design decision to remove the most prominent menu in a small screen view. I understand that space is an issue, but this design decision means that anyone accessing the site on a mobile device can’t see it at all – so you can’t put any unique links on there else mobile users would never be able to find those links. So you are obliged to duplicate those links into the other menus, leaving the Titlebar menu redundant by design!

In a small screen, perhaps the Titlebar menu items could be automatically prefixed or suffixed to the BuddyPanel menu items.

[Paul]

@tintomatoes You could do this: assign the links you need to both the Titlebar and Buddypanel menus. Then use to custom CSS to hide links depending on the screen size – note the custom.css file in your child theme already contains the media queries you need for different screen sizes.

So you could assign a ‘Home’ link to both menus but hide it from the BuddyPanel on desktop and tablet displays. It will still show in your Buddypanel menu on mobile.

[Atma]

Paul: Thanks, I’m planning to do just that.

But I feel that such custom coding should not be necessary in the first place. The theme should really deal with this issue out of the box because a disappearing menu is not at all ideal.

[Paul]

I see your point. On desktop it’s a natural menu position, despite the facts it’s not what would normally be the ‘Primary’ menu location. But it can’t be shown on mobile, and I think you’d run into problems trying to use it as your Primary menu when using a iPad in portrait orientation for example.

I have been thinking of styling the BuddyPanel menu differently so it’s always expanded on desktop and tablet but is a little narrower.

Vertical menus are a lot more tablet friendly.

[Atma]

Exactly. On most themes, the primary menu is along the top and in their responsive views that top menu moves to become a fly-out menu on the left side.

With Boss, the problem is that there is already a left side menu (the BuddyPanel) so the Titlebar menu has nowhere obvious to go in the responsive view. So we are left with no option but to customise the CSS as you suggested in your first post.

I think this is a real fundamental issue that needs to be dealt with in order for the Titlebar menu to be useful out of the box. There has to be some way of merging the menus in the responsive view e.g. the Titlebar menu can become the first collapsed sub-section of the BuddyPanel menu.

[Anonymous]

@tintomatoes @style960 @tintomatoes

Hey guys, your voices have been heard! We’ll add an option to integrate this menu into the mobile layout in one of the closer future updates.

We intended the left menu to be the primary menu, and added the menus in the titlebar later on as a sort of “bonus” menu area for those who wanted to use it. But, I understand that some people want that area to hold important menu items and they need to be accessible on mobile devices, so we’ll implement a solution. Most likely we’ll stack them above/below the menus that show up in the side panel that displays your BuddyPanel content on mobile.

[Anonymous]

@tintomatoes @style960 @tintomatoes @tjchester

This is fixed in latest release, v1.0.4

There is now an option in customizer to place the titlebar links in the left panel, either above other links, below them, or hide them completely.