Menu header: keeping it centered

Hi guys,

New bubbler here!
I’m trying to have a “centered” design for my app and i’m strugling with the header
I’m trying to achieve a header that looks more a less like product hunt’s :

I want to use dummy shapes to keep my logo, search bar and button centered on the page but for some reason, the do not behave like I would like them to

I grouped my logo, search bar and button into a group that has a fixed width. I want those dummy shapes to expand and shrink according the page width, how can I do that?

Here’s a link to the header:
Thanks a lot guys!

like this?

Yeah pretty much!
How did you do it?

Tried to add some entries, broke it again…
Can you guys explain me the logic to adopt here?


The problem is that when you dropped the header on a page (e.g. index), it is narrower than the page itself. The responsive engine will interpret this you wanting to maintain a variable margin on the right of the header. What you can do is adjust the width of the header (namely Header A on index) to be the same as the page width.

Finally figured out thanks to you guys!

Looks like my header and index are both the same width, but I’m having the same centering issues. Any ideas?

1 Like