Header Pro - Mobile Question - Centred logo with hamburger at side?

Support
#1

Hi,

I’ve been trying every which way I can think of but ultimately have failed.

For our mobile menu, using Pro header builder.

I wanted our 'business logo centred (with clickable link to homepage) , with the clickable phone number below it.

Then the ‘navigation layered’ hamburger button aligned to the edge of the header.

I managed to get it arranged correctly.

• With the logo and phone number button, on one bar … one container with the two elements. stacked one above the other and correctly centred

• The navigation then added to a separate bar with a different Z-stack value so it appeared above.

So it looked correct, but this meant only the menu was clickable and not the logo/phone number as they were on a lower Z-stack.

If I put everything in the same bar I cannot successfully have the logo/phone number centred. With the menu ‘hamburger’ button aligned to the far right.

Any ideas?

#2

Hi @draper3000,

Thank you for writing in, instead of having two bars, please have two containers in one bar. On the first container have the logo and number, set the Self Flex preset of that first container to Fill Space and the Horizontal flex layout to Center.



The second container which will contain the hamburger, set the Self Flex to Standard and the Horizontal to End

Hope it helps,
Cheers!

#3

Hi, thanks for the reply.

Unfortunately, that still results in the logo/number being off centre… pushed aside by the width of the hamburger button.

I can’t see what setting I should use to make the container with the logo in fill the whole width… ‘Fill Space’ and ‘Fill Space Equally’ do the same.

Images attached below for reference:

#4

Hi @draper3000,

We can create it using 1 Bar, 2 Containers.

The first container with Logo and Phone number button
The second container, where position is set to absolute. Right position is 0. Making this absolute means it will not take space thus, will not affect centering of the first container.

See this screencast for complete settings: https://screencast-o-matic.com/watch/cqQ1Ift41y

Hope this helps.

#5

That’s awesome… Thankyou so much Lely… worked a treat…

#6

Also for future reference for anyone else or future me…

Add the cude:
$el{position:absolute; right: 0;}

In the custom CSS for the hamburger container to force it to align to the right.

#7

You’re always welcome @draper3000!

Cheers.

#8

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