#15DaysOfCSS Day 10: Logo in the middle (and other locations)!

🦄 Flexbox Magic 🦄

and

Sep 24, 2021

Flexbox-based layouts have given new creativity to horizontal navbars in the last several years. For example, many people place their logo in the middle of their navbar. In other cases, the logo goes on the left with the navigation on the right, with everything in perfect alignment. How does this magic happen?

⛔️ Caution: Logos and navigation ⛔️

For years, logos have been included in web pages in the upper left corner. Conventionally, these logos link back to the home page when clicked.

As UXMovement cautions, backed by research, moving the logo to the center may frustrate users and weaken brand recall. However, sometimes your clients want what they want for design, and you can't talk them out of it.

Also, talking about how to implement a centered logo gives us an excuse to talk more about cool Flexbox tricks.

Grumpy Cat says well, this is not ideal. — Not ideal, but we’ll take it!

Step 1: Start with HTML

As always, everything is demonstrated in today's CodePen example.

<nav>
  <ul>
    <li><a href="https://jen4web.substack.com/"><img src="https://assets.codepen.io/296057/15dayslogo.png" alt="15 Days of CSS. Click for home." /></a></li>
    <li><a href="https://jen4web.substack.com/about">About</a></li>
    <li><a href="https://jen4web.substack.com/archive">Archive</a></li>
    <li><a href="https://jen4web.substack.com/welcome">Register</a></li>
    <li><a href="https://jen4web.substack.com/account">My Account</a></li>
  </ul>
</nav>

Notice the logo is inside the navbar, rather than displaying by itself elsewhere. Why do this? First, this give us Flexbox superpowers when we start styling the navbar. We can re-order our navigational elements to make that logo appear anywhere we want. Second, that link goes home, does it not? We could argue it's part of the navigation for the site. This is particularly true since the current design trend seems to be dropping a "home" text link inside of the navigation.

Step 2: Add the boilerplate

Add the border-box model to the page. Declare our fonts and sizing. Turn off bullets/margin/padding on the ul. Add some colors and remove underlines. Check today's CodePen if you're not sure about this code yet. It's been marked with a comment that it's the boilerplate from step 2.

Step 3: Make the navbar go horizontal

Again, we do this using Flexbox, declared on the ul element as the flex-container (or parent) and the li elements as flex-items (or children). We'll center the items and give them a bit of space in between. Finally, let’s include a debugging border so we can see what's happening.

ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 1.5rem;
  border: 1px solid black;
}

It's a good start, but the nav is at the top of the logo, which is probably not really where we want it. Confirm that with a debugging border:

li { border: 2px dotted #666; }

Same navbar with border on li, showing the links are aligned at the top of their boxes.

Let's push the navigation items to the center of their boxes. We've centered our navbar row horizontally (main axis) using justify-content. To change the vertical (cross axis) alignment, therefore, we'll use align-items. The center value will place the navigation in line with the center of the logo. A value of flex-end would push the links to the bottom of the logo. All of the possible values for this property are available at CSS Tricks.

ul {
   align-items: center;
}

Step 4: Reorder and tweak results!

At this point, our nav bar looks pretty good. The only thing left to do is add a few final styles and remove our debugging borders for two very different looks.

Logo on the left, nav on the right

If you'd like the classic look of "logo on the left, nav on the right," simply add this style:

li:first-child {
  margin-right: auto;
}

Here we select the first child in our list, which happens to be our logo link. When you assign margin-right: auto, you tell Flexbox to take any extra space not associated with the gap property and place it in between your logo and the rest of the navbar.

👀 NOTE: The selector is NOT a:first-child. Why is that? Two reasons: 👀

If ul is our flex container, li is our flex item, responsible for the individual boxes in the navbar layout. Place the margin on li to change layout.
The <a> is a child of <li>. There is one link per <li> element. Therefore, a:first-child would impact all links in the navbar. They are all first children of their <li> parent!

The final CSS, beyond what was included in the boilerplate, looks like this:

ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 1.5rem;
  align-items: center;
}
li:first-child {
  margin-right: auto;
}

Logo in the middle, nav on either side

To accomplish the "logo in the middle" trick, it works best if you have an even number of navigation items. Otherwise, the logo won't really be in the middle.

First, we'll need some classes:

<nav>
  <ul>
    <li class="logo">...</li>
    <li class="leftnav">...</li>
    <li class="leftnav">...</li>
    <li class="rightnav">...</li>
    <li class="rightnav">...</li>
  </ul>
</nav>

(The links are where the ... is -- we are trying to keep this a little shorter. See the CodePen for the full revised HTML.)

Now assign the order property to each of these classes. order is appropriate for flex items/children, and it controls the order in which the boxes are displayed.

.leftnav {
  order: 1;
}
.logo {
  order: 2;
}
.rightnav {
  order: 3;
}

Or, if you wish, push these navigation items to the far left and far right, leaving the logo in the middle with lots of room:

.logo {
  order: 2;
  margin: 0 auto;
}

These are just a few ideas for how you could reorder a navbar with Flexbox to achieve interesting and attractive layouts. What are your ideas for this? Share them in today’s challenge!

🥳 Reminder: it’s the weekend! 🥳

Our next post will be on Monday. We’ll keep checking for your posted answers to challenges for Days 1-10 on the various Substack discussion boards. Thank you so much to all who have been participating! It’s inspiring to watch you learn and grow from working on the challenges.

Next week we dive into all kinds of crazy navbar tricks: responsive navbars, adding accessible icons, accessible CSS dropdowns, CSS-only hamburger buttons, and fat footers.

🎉📚Get the #15DaysOfCSS e-book📚🎉

These #15DaysOfCSS posts will be compiled into an e-book — pre-order now!

Email is great, and blogs are awesome, but it can be challenging to use them as a reference in the future. We'll be assembling this month's work into an e-book.

Pre-order the book