Jonathan Jonathan - 25 days ago 6
CSS Question

Centering header buttons while not making them static/absolute

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

https://gyazo.com/e0bab8ba195e33110b19123c7fc3c568

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:
https://gyazo.com/044c02f056fd7d76d34cf4e1a912af45

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)
https://gyazo.com/e9f89e7918dc1f2d3059b1938b62536d

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

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

Comments