Jonathan Jonathan - 1 year ago 45
CSS Question

Centering header buttons while not making them static/absolute

I am currently creating a fixed header which looks a bit like this.

The logo is always at the left, the small buttons always at the right, and the menu buttons in the middle. I gave the logo left: 0, the menu buttons using the code below this text, and the small buttons right: 0.

left: 50%;
transform: translateX(-50%);

What I want to happen: The buttons in the middle are always centered until one of the things at the side (the logo or the small buttons) pushes it somewhere else. When the bar gets way too small everything gets pushed off at the right, but this only happens when all white space is filled up. (At this point my mobile layout will activate)

Here is the problem: When the screen gets too small this happens:

My second try was using inline-flex. This is the code I tried to use (applied on the whole header):

display: inline-flex;
position: fixed;
justify-content: space-between;
flex-flow: nowrap;
white-space: nowrap;
overflow: hidden;

The problem here is, that the logo on the left is wider than the small buttons on the right, and because I use space-between the middle buttons get offcentered by default.

(It is not that clear in this picture, but they are definitly offcenter)

Is there some option in flex I missed? Or is there a better way to solve this problem?

EDIT: A friend suggested I add an invisible element to the small buttons on the right, which is exactly wide enough to keep the middle buttons in the center. Altough this works, it still has SOME whitespace because of the invisible element.

Answer Source

you could add an equal min-width to the logo and the small buttons, that way the remaining space is distributed evenly.