centered gap in navigation

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.

Timeline of a bugfix

2:00pm (yesterday): While reviewing site changes with our designer one day prior to launch, I noticed that the shopping cart functionality was screwed up. Badly. The site is using Commerce for Drupal 7, and when you change options for a product prior to clicking “Add to Cart”, it’s supposed to refresh the form with new details and an updated price. Instead, the form disappears. Obviously, this can’t be launched and fixed later. Continue reading Timeline of a bugfix

Things web developers wish designers knew

Images

  • Keep backgrounds simple. You shouldn’t add things like overlays, semi-transparency, or gradients in Photoshop — those can be added using CSS. This has the advantage of making the overlays/transparency/gradient easy to tweak in code, while increasing the reusability of the image.
  • Save images in as large a size as practical, especially photos. It’s easy for us to scale an image down, not so easy to scale them back up.
  • Don’t bother optimizing image files. We do that before moving them to production anyway. Continue reading Things web developers wish designers knew