Pro custom header tweaks

[FoundationDesign]

Hi, I’m trying to match a Pro custom header to a design layout. I have all the components in place, but I’m struggling to refine them so that they match exactly.

The logo needs to increase in size and to move to the left. The middle menu needs to align to the middle. I’ve put underline (particle) in the menu to show active links and rollovers but can’t figure out how to have them directly under the menu item. The contact menu needs to have to space between the stacked items reduced and ‘Email me’ should align with the main menu.

The things that confuse me are the flexbox and all the margins and padding. Also, all of this needs to be responsive.

Can you help please and/or point me to the correct tutorials?

Details in Private note.

[tristup]

Hi Paul,

Thanks for reaching out.
It seems that you have set the Flex alignment of the Bar to center, I went ahead and set it to the Start and adjusted the Flex alignment of the Container as per the need. And set the width to 30% and 50% to the Header Logo and Header Menu container to adjust the width. I would suggest you use the Text element instead of the Navigation Layer element to match the design you want.

Hope it helps.
Thanks

[FoundationDesign]

Hi @tristup. Wonderful… thank you so much for your help and the settings info. Just one more thing… the line under the links in the menu to show active links and rollovers. They are at the bottom of the Header - Menu frame. How would I place them directly under the menu link item as shown in the PDF?

[tristup]

Hi Paul,

That is because the Flexbox > Vertical Alignment of Navigation Inline element was set to Strech, I went ahead and set it to Center and now the line comes just under the menu item.

Thanks

[FoundationDesign]

Hi @tristup. Thank you so much, that is exactly what I was after.
I do struggle to get my head around flexboxes and how they work. Is there a Themeco Pro tutorial online that you would recommend that would help me?

[ruenel]

Hey Paul,

Please check out these videos:

There are also other video tutorials in our Youtube Channel:

Themeco

Best Regards.