Menu above search on Pro Header

[Jacko_Pinto]

Hello,

I need to add a small two option menu right below (or right above - we’d like to see how both look) the “search inline” box on a Pro header… I tried several things and I can’t get it to work

Can you please help with this?

Here’s a screen-shot as a reference:

Thanks!!

[ruenel]

Hello @Jacko_Pinto,

Thanks for writing in!

You can create a Global block and insert a search inline and a navigation element in it.
You can then use the Global Block shortcode inside a content area element as a replace of the current search inline element.

Hope this make sense.

[Jacko_Pinto]

Thank you RueNel.

I recently started using Pro so I’m still very lost. Can you please clarify some more?

I certainly appreciate your help!

[rad]

Hi Jack,

Sure, please check this https://theme.co/apex/forum/t/global-blocks/24723

As Ruenel said, you would need to add the two elements within a global block so they would appear as a single element that you can align in the header. It’s like grouping them within global block which you can edit just like how you’re editing it in the builder.

Hope that helps

[Jacko_Pinto]

Thank you Rad!

So I created the global block, added a search and a navigation element inside it with the two elements inside but I can’t figure out how to edit in on the header.

It shows up, but it needs to be wider… I also can’t figure out how to turn the current navigation to “hamburger menus” when viewed on mobile.

Currently, when viewed on mobile, the “right” hand side menu remains visible, the global block shows up, but the left menu hides.

Thanks for the help! Going crazy here hahaha

[ruenel]

Hello @Jacko_Pinto,

To increase the space for your content area element, please edit your header and make sure that the Self Flex of the container is set to “Fill Space”.

Hope this helps.

[Jacko_Pinto]

Thank you RueNel.

I changed that and I’m afraid it didn’t work. Can you please help?

[rad]

Hi @Jacko_Pinto,

Thanks for reaching out.

Do the global block intend to be a mobile element? If yes, instead of adding an inline navigation element, please add navigation layer or navigation collapse element. Inline navigation will not switch to hamburger icon since it’s inline, you’ll have to manually add yours. In X theme, it seems automatic but there is an actually two menu, and it has to be automatic since it’s not customizable.

And maybe switching to mobile navigation will increase its width too, flex sizing is only limited to the width of the container. And it’s width is already narrow when viewed on mobile, hence you can’t increase its width further.

And in case you’re not familiar with Hide during breakpoints feature then please check this https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378. Your menus are too long that’s why part of it is hidden when viewed on mobile. You’ll have to use this feature to hide your inline menu from desktop and show mobile menu.

Thanks!

[Jacko_Pinto]

Thanks for all your help. I will keep working it. Best regards!

[ruenel]

You are most welcome!