See the Pen centered gap in navigation by Martin Blase (@mblase75) on CodePen.
A site I recently built had a relatively unique design: the top navbar was split into two, with the logo was centered in the space between them. Easy enough, except for two things: (1) this was being built in WordPress, which doesn’t like putting logos in the middle of a list of menu links, and (2) the site was being built responsively, and the mobile design had the usual logo-on-left, hamburger-menu-on-right header.
A short search on StackOverflow came up with a couple of answers, but the most elegant in my opinion used a combination of :nth-child and :nth-last-child to detect when an element was in the center (or near the center) of a group of siblings.
So, I wanted to select only the first element after the halfway point in an even-numbered list. :nth-child(3):nth-last-child(2) would identify the third element in a list if and only if that list had four elements. Similarly, :nth-child(4):nth-last-child(3) would identify the fourth element in a six-element list. By using SCSS to generate these in a loop, I could target all possible middle or just-past-the-middle elements with only few lines of code.
But, you may ask, why that particular element? Well, by using flexbox to display the entire navbar in a row, I could target the center-most list item and add margin-left: auto to put all the available whitespace to the left that one element. This would leave a large gap on all browsers above a certain width (targeted with responsive media queries, naturally) in which I could absolutely position the company logo. By adding both left:50% and transform:translateX(-50%) to that logo, I could center it perfectly within the header.
