Container in Pro Header pushing out and hiding menu

[FoundationDesign]

Hi, I have a custom Pro Header where the container containing the logo on the left is pushing out the menu and hiding it in when viewed on a phone.

What I’m trying to achieve with the menu is to have the logo aligned left parallel with the headline below.
I also want the menu to align right so the links nav item at the end of the menu won’t get cut off.
I want the menu to show for XL and L screens and then for the collapsed menu to show on devices.

I’ve spent hours trying various setting combinations and nothing seems to affect it. Can you please have a look and tell me what I have done wrong here?

Home - Wellesley Studios

[ruenel]

Hello Paul,

Thanks for writing in! Regretfully the given credentials do not work for us. Please double-check it. Meanwhile, please make sure that you have set Flexbox for the bar like this:

And for each container, the Flexbox setting would be this:

And you might be interested in these video tutorials:

Hope this helps.

[FoundationDesign]

Arrrhhhg… I used the wrong URL.

Please check the secure note now… and note the new username.

[FoundationDesign]

I’ve checked the Flexbox on both the Bar and containers and they are set as you have suggested.

[ruenel]

Hello Paul,

The issue is because you have added a maximum width of 55 pixels for the 2nd container.

I went ahead and fix the issue by changing it to 100%. Check your header now.

[FoundationDesign]

Hi @ruenel. Thanks for that… but you haven’t read my enquiry fully…

What I’m trying to achieve with the menu is to have the logo aligned left parallel with the headline below.
I also want the menu to align-right so the links nav item at the end of the menu won’t get cut off.
I want the menu to show for XL and L screens and then for the collapsed menu to show on devices.

[FoundationDesign]

What is driving me crazy… is why is the logo container so much wider than the logo?

[ruenel]

Hello Paul,

Do you mean like this?

I went ahead and edited your header. I set a content maximum length of 960 pixels only. And I also set the Flexbox of the navigation inline element into this:

Check your header again.

[FoundationDesign]

Closer, but I wanted the menu items on one line and not stacked. Where did you enter maximum length of 960 pixels?

[tristup]

Hi Paul,

I went ahead and edited your header bar and change the content maximum length from 960 pixels to 1080 pixel, to make the menu items on one-line. I have changed the length in the first bar of your specific header. Please find the screenshot of the attribute.

Thanks