Weird gap between the last menu item and the button

There seems to be some weird extra space between my last menu item and the button in the navigation, that makes the navigation look a tad left aligned rather than centered. It becomes even more obvious when you reduce the browser width.

The site is just a test and it’s live on a subdomain here.

How can I get rid of that extra space? I tried changing the gap, but even at zero there’s that extra space.

try this setting. it pushes the text to the right. you will need to put a little padding spacing on the button for the left size.

can you just copy the menu into an empty project and upload

Sure:

elementsapp://downloadDocument/y7e25ph4wNez

I sure could, but then the navigation will generally be right aligned, which I don’t want.

Try this setting …

… or a value that gets the right/left gap size that you want

That’s a workaround that shouldn’t be necessary. I would expect that the navigation is centered without extra margin to the right side when I select the centered option.

@ben or @dan any ideas to this?

I think the page links are centered on the total width rather than the space between logo and button. The extra space is because the logo is bigger than the button hence the need to adjust the margins. That seems, to me, to be a reasonable and flexible approach given the different options available in the component.

Not at my Mac but if you dropped the image in the dropzone that could be the issue, try dropping the image in the logo area

Thanks for your suggestion, Steve. I tried using the logo area in the general project settings. Same issue.

@pumpkin I have made the same observations like you. It’s not that the navigation is not centered, it is centered in its middle “container”. But the two “container” to the left and the right have a different content.

Your Logo is rather wide and your button is rather small. In your case there is space left of the Button as the “container” does not adopt to the size of your Button and therefore you recognise it.

You can currently only solve the problem with workarounds, but you are absolutely right, the component should do it correct.

1 Like

This is not a bug (afaik), and the text is centred for the site. I set your buttons width to 52 (to match your logo) just to confirm this.

If you wanted more control, and your navigation is single level, I’d suggest making your own navigation with the built-in components (flex, top pages, etc) that way you can position things exactly as you want.

Hope that helps!