Header Builder's Collapsed Navigation is Truncating Menu Text

I’m using Pro’s Header Builder and I’m having a problem with some of the 2nd-level menu text being cut off.

This screenshot from my Google Pixel phone shows the problem. The top-level menu item has been expanded. I’ve also tapped the sub-menu item Property & Land Managers to show that menu item’s submenu. The first submenu item, “Property & Land Managers” is displaying correctly but the second item “Articles & Links for Property Managers” is being truncated.

Here’s the development site:
http://tcb.videoperformance.video/tcb/

I’ve tried changing various settings in the header builder but I have to say many of these options are a mystery to me—particles, what’s that? What exactly is “primary text” and “secondary text?” What’s a “subindicator?” I’d be happy to read the documentation if I could find it. Is there any actual documentation other than the Knowledge Base?

Hi there,

Thanks for writing in.

I checked it in both iOS and Android devices and it’s working perfectly. The clipping occurs if the item overflows the height of the sub-menu wrapper, but it’s not happening since every time you open the sub-menu, it recalculates its new height to prevent clipping. I confirmed that by manually adding long text through developer console and yes it’s clipped, but when I re-opened it, the new height is implemented by javascript and there is no clipping.

Perhaps there is a javascript error that prevents height calculation when you tested it? I don’t see any error as of now, and it works. Or maybe it’s working now on your end too as the items are now different from your screenshot.

Thanks!

No, actually, it’s still not working for me. I have not changed the menu text and it’s still clipping most of the time; although not always. But it’s unpredictable and seems to always fail the first time.

Furthermore, the problem is worse with the Tree Care Professionals submenu item. To reproduce:

  1. Tap Professional Groups (top-level menu)
  2. Tap Tree Care Professionals (submenu item). Another submenu with 3 items is supposed to appear. I’m only seeing the first one (Tree Care Professionals) and there’s no indication that the other two exist.

Hi there,

It seems to be problematic on very small widths even lower than 320 pixels. We do not support devices that are smaller than 320px regarding the width of the device.

But anyway to get rid of that you can add this temporary solution for your case. Add the code below to Pro > Launch > Theme Options > CSS:

@media (max-width: 480px) {
	.hm8 .sub-menu .x-anchor .x-anchor-text-primary {
    	margin-top: -10px;	
    }
}

Hope it helps.

First, the screen width is not less than 320 pixels. The menu text “Tree Care Professionals” is over 500px wide and the Google Pixel display overall is full HD: 1920 x1080.

In any case, I tried adding the CSS you provided but it has made no difference. The menu is still unusable on my Pixel.

Hello @WPDave,

Thanks for writing in and I’m sorry to hear that you seem to be having some issues. I have checked your website on a Pixel I have here and am not seeing any of the issues mentioned in the initial thread. Additionally, I would recommend removing the CSS mentioned above as that can potentially be problematic with some of the setup of Pro’s menus (sorry for the confusion on that).

Additionally, as you mentioned initially, we do feature extensive documentation on Pro’s features in our support Knowledge Base. You will find many helpful articles there on Pro, and I would highly recommend taking a look at our “Using Partials” article, as it features many videos that go into great detail on each piece you referenced:

https://theme.co/apex/forum/t/pro-using-partials/213

You will specifically want to take a look at the “Anchor” and “Particle” videos as they will give a great amount of context when working with menus here. Additionally, our “Tips and Tricks” article for Pro features videos on navigation, using flexbox throughout the builder, and more:

https://theme.co/apex/forum/t/pro-tips-and-tricks/214

Finally, there are many articles all throughout the Knowledge Base on individual elements within Pro’s builders in general, which are further resources you can read up on. I just wanted to make sure you were aware of these resources as you seemed to indicate that you were unable to find documentation on these features.

If after reviewing the resources mentioned above you still find that you are experiencing some trouble achieving a particular look, do not hesitate to let us know and we will be happy to offer guidance on achieving that result within the tool.

Thanks.

OK, I’ve been watching some of the videos and playing around with all the various options and I can’t find anything that solves—or even affects—the problem. Briefly, the problem is that the submenus don’t expand, as needed, to accommodate all the submenu child items. I’m seeing the same behavior in the header builder editing environment as I am on my Pixel phone. The screenshots below are from the Pro Header Builder editing screen.

Starting with Screenshot1 you can see the collapsed navigation menu showing all the top-level links (only).

In Screenshot2 you can see the Professional Groups menu opened and displaying the three submenu items (Property & Land Managers, Tree Care Professionals and Conservation Groups). So far, so good.

The problem occurs when I try to open one of these three submenus. If I click on the first one (Property & Land Managers I can see two of the three sub-submenu items (Key Resources and Articles & Links for Property Managers). But there is a third item that is missing: Sample Newsletter Articles as shown in Screenshot 3:

The problem gets worse with each succeeding submenu. If I close the first submenu (Property & Land Managers) and open the second submenu (Tree Care Professionals) only the first of its three sub-submenu items is shown (Key Resources) as shown in Screenshot 4:

And if I close submenu 2 (Tree Care Professionals) and open submenu 3 (Conservation Groups) none of its three sub-submenu items is shown.

I have discovered a workaround that illustrates the correct/desired behavior; here’s an example:

  1. With only the top-level menu items displayed click on Professional Groups.
  2. Click on the Conservation Groups submenu item. Note that none of its sub-submenu items is visible.
  3. Click on top-level menu item Professional Groups to collapse all the submenus.
  4. Click again on Professional Groups to expand; it may work correctly. Or not. If I repeatedly click on the Professional Groups and/or Conservation Groups it eventually starts working correctly. Once it starts working correctly it seems to then work more or less correctly until a new page is loaded. It doesn’t seem exactly right because multiple submenus could be displayed at any given time. It seems like only one submenu should be.

I’ve looked high & low and haven’t found any setting that gets it to work correctly without this workaround. The main (not collapsed) version of the menu works fine.

Chrome V 60.0.3112.101
Win 10
http://tcb.videoperformance.video/tcb/

Hey there,

This is currently a known issue which is currently being investigated. There’s no immediate fix for this. For now, please don’t use third level menu items. Or, you can use UberMenu instead. See https://theme.co/apex/forum/t/extension-ubermenu/75 for more details.

Thanks.

Any progress on this? I’m still having to work around this problem.

Hi there,

I double checked the issue tracker and the report is there and it is not fixed yet. The next release of the theme will be in February as mentioned in our news section:

As soon as the theme releases you can check the Changelog to see if the bug is fixed on this release or not:

https://theme.co/changelog/

Thank you for your patience and understanding.