Pro Header Custom Breaks for Menu

Support
#1

Hi there,

I’m struggling to get the new Pro header to work the way I envision. I have made a video explanation here: https://screencast-o-matic.com/watch/cbjDqIlK7Q

The site is: http://mueskes.dev-website.us/

In a nutshell, I am looking for:

  • Stop the inline nav menu from wrapping the link name to 2 rows and just move to showing the mobile menu instead of cutting off the text or wrapping it to 2 rows.

  • Adjust the spacing of the “Free Estimate” button and the “Menu” button (created with “Navigation Collapsed” element so those items are closer together and text stays on one row and doesn’t get clipped off. In other words, don’t resize the “Menu” element.

Using latest version of everything.

I will send credentials separately for the sake of time.

Thanks!
Dawn

#2

Hi Dawn,

1.) Please adjust HIDE DURING BREAKPOINTS of the Nav inline. Enable it’s display only on the largest screen. Then for Nav collapsed, do the opposite - hide it only on the largest screen. Now if in certain screen size on the large screen, it is still going into 2 ROWS, the only way to prevent that is to adjust your menu link. If it doesn’t fit, rename your linlks to shorter one.

2.) Please set fixed width for the button to avoid resize. Like using for example 400px instead of resize.

Hope this helps.

#3

Isn’t there a way to get the inline navigation to stop wrapping text to 2 lines and instead force the mobile menu button to come on when the text is about to wrap to 2 lines? This is very confusing.

Thanks,
Dawn

#4

For example, I just went to “Items Flex” in the Inline Menu and set to “No Shrink.” Now the nav text seems to stop wrapping to 2 rows, but it just all overlays on top of each other. See screenshot:

There MUST be a simple solution to this?? A setting I don’t understand or CSS to force the menu to go to mobile?

Thanks,
Dawn

#5

Hi there,

The solution is minimizing the number of your menu items. The setting for device visibility is only applicable for desktop, tablet, and mobile. If you’re going to display mobile menu in desktop then it will be always a mobile menu regardless of desktop screen size.

Try removing the icons or smaller logo.

Thanks!