Streaming live at 10am (PST)

How to create a header nav bar, with a logo aligned left and login link aligned right?


What I've read so far to solve this problem:

This link describes how to create a fixed nav bar very well: So that part is pretty straight forward.

And this answer explains, very well, how to create a custom nav bar:

However, my question: Does this nav bar require custom divs, or is there a non custom way to build this navigation bar with a left aligned logo, and a right aligned login/link, like this:

FYI: Logged in the nav bar will look something like this, and have 6 or 7 elements (logo & links). The logo aligned left, and the links aligned right:


Yep, I'd do a 2 column container, the left is left-aligned and just big enough for the logo, that will allow your logged in menu to grow as much as possible before overflowing to another line, and then simply right-align the right block will keep your log in/logged-in menus (maybe toggle a hidden class based on whether the status is logged in or not).

Currently I'm using link blocks for the menus since we don't have lists yet.