[Hacking Bootstrap] Navbar Customization

[Hacking Bootstrap] Navbar Customization

Bootstrap’s Navbar  (shown above as the area inside the red rectangle) is the “header” or “navigation” of a website. It serves the following functions:

  1. Show your logo.
  2. Help users navigate to the most important pages you want users to go after they land on your home page.

For example, in my blog the top of left I show my website logo and name “Modern Black Hand”, as images. Since I want my reader to see the main four topics of my blog: Internet of things, Cycling, Web, and Beer & Life, I display their links at the right side of navbar. As I anticipate users might also want to search for a particular item (eg: IPAs), I add the search icon into navbar as well.

my-navbar

 

There are many types of navbar specified by its class. ‘navbar-default’ is the standard one with dark text and light background. The opposite is ‘navbar-inverse’. Adding ‘navbar-fixed-top’ fix the navigation bar on the top of your screen. This is useful for the user to go to other pages when they scroll down the pages. Other things you can do are drop-downs and left/right aligning navbar buttons. You can find more information here with examples.

We often want the navbar to match the color styles of our website. Therefore we should go beyond using ‘navbar-default’ and ‘navbar-inverse’ and create our own color schemes for navbar. One such tool is from TWBSCOLOR:

TWBS_colors

It enables you to customize background, active background, default color, and active color. One can choose different formats for the output. For example, mine gives the following CSS codes:

There is a small problem in the generated code: the website didn’t have options to specify the color when the mouse hovers over the button, and the generated code specifies the hovered background as white (highlighted red), or did not specify the hovered text color. This is incorrect, as I want the hovered button has black background and white text. Thus they should be fixed as:

Additional comment: if one uses Bootstrap with WordPress’ menu, the current active button .active is replaced by .current-menu-item . Therefore the above blue section should be replaced by:

Finally, let’s add a simple cool animation to switch button descriptions into icons. The icon source is Font Awesome. Like bootstrap, to use Font Awesome you just need to add a line into the header as described here:

https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css

 

Here is the sample code from Codepen:

See the Pen Moving-in Icons with hyperlink by Alan Luo (@yaulaannl) on CodePen.17612

To use the code, change the class .btn-5 to match the class of your Bootstrap button. We will talk more about using simple css3 animation in the following section.