Header Menu text stacking

I have tried several iterations to make the menu titles appear in a single line (and they do, but only if I choose “Fill Space” in the Self Flex section of the “Navigation Inline” (when I choose this, the menu items are too spread out)).
Hereis a screen shot of what I want it to look like and the second screen shot is what it looks like now.

Please advise … ?

Login info to follow in private note

Hi there,

Thanks for writing in.

I can’t access the provided URL, it’s like a non-existing site. Maybe it’s wrong?

For the meantime, please try the Fill Space Equally option and Flex Layout's Horizontal to Center.

Thanks!

I will try your recommendation above
Secure note below

Hi there,

I’m able to login, this is the setting that you need to change.

SELF FLEX = Standard
ITEMS FLEX = Fill Space

I cloned your header and applied it there.

Thanks!

Thank you for the quick fix. However, it is not responsive. Please see attached image.

Also, I forgot to mention that the social icons get “squished” when shrunk down to mobile size. Any suggestions … ?
Thx again for your quick replies!

Hi there,

Please check this another thread, https://theme.co/apex/forum/t/pro-header-placement-and-responsive/31064/2. It should explain how it should be done :slight_smile:

In mobile, your layout should be stacking together instead of inline (columns).

Thanks!

Thank you for the link. I have reviewed it, but I believe there must be an easier way to make it responsive.
If I understand this correctly, you want me to make several “different” headers so that they display correctly on different devices.
If I use a “standard” header, things are responsive (without having to create multiple headers).
Do you mean to tell me that “Pro” does not have this option … ?

Sorry, just confused (and frustrated) at this point.

Hello There,

You cannot display a full menu in a header in different screen sizes that is because there is not enough width to display all the menu items. In most case, there are no versions of the menu present in the page. One to display the desktop version and the other is the collapse/expand version for the smaller screens.

In your custom header, if the number of items can no longer fit in the screen, then it is advisable that you create two versions of your header. And to make sure that the icons will not shrink, please make sure that the Self Flex in the container settings is set as “No Shrink”.

Hope this helps.

The “No Shrink” option worked perfectly!
Thank you for that.
I designed a site using X (not Pro) that utilizes a menu that is responsive (as can be seen here: http://amplifieddynamics.com)
I am only trying to duplicate this effect using Pro.
X automagically shrinks the font, spacing, etc on the menu and so eliminates the need to create additional menus.
It even uses the hamburger icon when the page is viewed on smaller devices.
I understand making different menus for different resolutions, but I would have to create a menu for Desktop, a menu for Laptop, a menu for Tablet and finally a menu for Mobile.
See attached screen shots.

That just seems like a lot of extra work (something that was not required in X).

Am I missing something … ?

Thx for your patience and quick replies.

Hi there,

That is correct. As there are many choices in the Pro Builder and the fact that all parts are element based. You need to forget about X as you entered in a completely new world with Pro header. More choices that you have in Pro comes with the price of more work to fine tune stuff. For example, the Navigation Inline element does not turn into mobile menu automatically and you need to use the hide during breakpoint feature to show another element on mobile or table.

I suggest that you check this article. Then you can read more about each element, for example, Inline Navigation and Navigation Collapse or other navigation choices you have in the Elements section of the list below:

Thank you.

Thank you for your confirmation.
I have taken the plunge and created a separate Navigation Dropdown element for mobile.
On tablet size, the Main Menu is still a little too large to display all of the menu items, but too big to display a hamburger icon.
Any suggestions on how to narrow the space between menu items or something similar … ?

Thx for your patience :smiley:

Hey @xso,

In that situation, it is recommended that you drop one item in your menu. If that is not possible, you will need to reduce the size of the Top Links font and / or reduce the right and left paddings.

Thanks.

Exactly what I was looking for!
Thank you so much.

PS
Is there a page on your site that has tutorial videos for Pro?
I have been here: https://theme.co/apex/forum/t/pro-header-and-footer-builder-introduction/103
I was just hoping that there was a specific page that had ALL your Pro videos.

In any event, thanks for all your assistance (and patience).

You’re welcome. Yes, almost all of the links in the Element Resources section in our Knowledge Base have videos.

Hope that helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.