An easy way to create a logo centered navigation with Bootstrap .navbar class.
It’s easy but not easy if not knowing
That’s true for almost everything, right?
Here’s a simple navbar screenshot. Brand logo and links line up horizontally. Without any modifications, navigation looks like this.
Then I wanted to put the logo in the top-center of the page and line up the centered links under the logo. So, how should I write codes for this?
All I need is this (and a dash of pepper)
Well, this is the solution I came up with.
- Create new class for the wrapper of navbar contents and
- Add flex-direction: column; to it, and voila!
To me, it’s like magic. Seriously. Add just one class and then these elements completely change their behavior. That’s one part of the reason why I keep learning how to code. I’m learning how to use magic. Anyway, here’s a sample.
See the Pen Bootstrap Logo Centered Navbar by Ai Kawasaki (@codedlovely) on CodePen.
If you’re viewing this sample on desktop/laptop and the navigation menu is initially collapsed, try clicking HTML button on and then off. There might be a way to display result in full width, but I haven’t figured out yet.
If you’re on a mobile phone right now, above sample would be definitely collapsed, so try zoom-out by tapping 0.5x button to view the result.
Note about “a dash of pepper” part
For mobile/small displays, navigation collapses at the breakpoint you specified, so you may want to modify the elements’ position with changing flex-direction and text alignment.
That’s all for today.
See you