Multiple Navigation Bars in Header with Flexbox

Posted by in Software

I’ve got a requirement to build a site header with three components:

  1. Brand (company logo…) – left
  2. Menu – center
  3. Shortcuts (settings, search) – right

The result should be looking like this:


Now, with Bootstrap is really easy to get the brand (and the menu) justified to the left and the shortcuts justified to the right. However, it is surprisingly difficult to get the layout above due to several reasons:

  • The collapsible structure separates the brand from the rest, resulting in a 2-level nesting (i.e. the two navbar lists are in their own <div> at the same level as the <div> containing the branding)
  • Bootstrap has some !important settings in the default style; overwriting them would defeat the purpose
  • Mixing display:block and display:flex is bad for you :)

Consequently, I’ve tried the { margin: auto } trick with no success (maybe a more patient soul would have more success).

After a couple of hours of digging, I’ve reached a somewhat stable solution using flexbox.

Note: The code outlined below is SASS and contains some angular bits, which normally you should be able to ignore.


My solution has has a navbar-fixed-top layout. The preamble is quite standard:

The brand and toggle are grouped for better mobile display. This is a bit of code I’ve seen in a lot of samples:

The two lists have their own group:

Since the collapse style has a block display, I’m adding another layer with a flex one:

Now, I’m adding the flexbox items:

As you can see, there are three items:

  • A &nbsp; to provide a reference point for the flex justification. Otherwise, the first item (the menu) would be at the beginning of the box and we need it to be in the middle of the page.
  • The menu – we want this to be in the middle of the page. The angular template contains a list similar to the third item
  • The common operations – this provides a settings link and a search button

Now all we need to do is to close the tags:

The SASS classes relevant to the above code are:

They are pretty self-explanatory.


The good thing is that it works nicely right now. The bad thing is that you need to wrap things up to get around the !important tags present in bootstrap. It reminds me of the nightmare that was (still is?) nested tables.


A little experiment: If you find this post and ad below useful, please check the ad out :-)