Align elements in Header

🤝 Discussion
,
1

Hello, I am trying to create the following layout. It's almost ready, but the only problem I'm having is aligning the header elements with the main content.

image
image1280×695 5.87 KB

If I remove the logo and add a left margin to the elements equal to the sidebar width, they become centered. However, when adding the logo, the alignment no longer works. I tried placing the logo in the sidebar, but since the sidebar is below the header, it looks odd.

image
image1274×161 3.11 KB

One solution I was trying is dynamically adjusting the elements’ margin based on the resolution, but I don't think that's the best approach.

1 Like
2

With the logo, the page is looking like this:

image
image1287×140 2.2 KB

3

bump

4

There's a way to make the sidebar like this?

image
image2456×1644 94.2 KB

That way it would be possible to align the header and canvas content.

5

@lzgc,
There is no great way to accomplish what you want, but here is hacky solution for you. Will this set up work for you?

CleanShot 2025-04-01 at 15.46.05@2x
CleanShot 2025-04-01 at 15.46.05@2x3872×1326 352 KB

Download the json for this here so you can see the settings:

header_body_sidebar_alignment.json (140.3 KB)

Another option is for you to not use a global Header component, and instead, within your canvas, create a Navbar component at the top.

Let me know what you think!
(I have filed a feature request to make this easier to align in the future)

2 Likes
6

Thank you for the reply! I'll take a look.