Let's say you hate header bloat, and trust that your user can click "home" button to go to website navigation.
Logically, you start with the navbar to be the first child of a `display: grid` wrapper with the following grid-columns: ''7vh 1fr 9vh''.
But you also want to make sure that the logo in your navbar is on the side where the reading starts, and the buttons are on the side where the reading ends (this post will assume left to right reading).
So you face a question: how to avoid `position: absolute` or `position: fixed` trick everyone uses to place items into fixed navbars?
Here's a simple answer:
1. Use `<span>` for logo wrapper / button wrapper in navbar (this enables us to use relative positions with precision);
2. Use relative positions to bump our typography lower by saying `top: calc(7vh / 2 - 0.5em)`;
3. Define `--horizontalOffset` to be equal to `100vw` minus the default width of your content divided by two (offsets are applied to both left side and right side). In my case it was `--horizontalOffset: calc((100vw - 54vw) / 2)`;
4. For the logo element now it's easy to see that relative bump from the left has to be exactly this offset, so we write `left: var(--horizontalOffset);`
5. For the buttons, the formula is only slightly trickier. We still do a relative bump from the left (because we need to push it to the right), but here we need to calculate how much do our buttons take in `em`s, which in my situation is `20em`, and bump with the following formula: `left: calc(100vw - var(--offset) - 20em)`. First bit means "take offset out of the full viewport width", but if we stop there then our buttons will poke out to the right of content, so we need to account for a good approximation of the width of the button wrapper.
Finally, we got a clutter-free navbar solution!
