Customize your Bootstrap Navbar

I want to sincerely appreciate everyone that takes the time to read my articles. I will keep sharing lessons that I know present a steep learning curve when you go at them by presenting them in a most comprehensible format.

The Navbar is important to every web app because it serves as the navigational compass that users of your app will your to find their way around your application.

Read my introductory article on setting up the Bootstrap Navbar here:

Fine course charting through the BootStrap Navbar

Emma Odia

#bootstrap#development#web#frameworks

I will share important factors you should take into consideration when building your Navbar:

1. It must be immediately visible: I recommend setting it at the top of the page and fixed there too, thus whenever a user scrolls they can easily navigate to any other section of the web app which they want to to access with out scrolling all the way back to the top of your website. Sufficient A/B testing can also make your decide on what works for your web app.

2. It must be easily understood and reflect drop-down icons if any: I suggested the URLs to add to your Navbar in the article I mentioned above and listed

Home | About | Contact | FAQs | Blog

Home is the landing page of your website. It can be described as the inscription on the door which determines if people reading it will want to pull the door knob which is the big call to action button that tell people to either sign up to use your service (product) or read more about you (portfolio).

1. It must be responsive across devices: Whether a user visits your web app on Desktop, Tablets and small mobile screens they should be able to easily navigate around your web app and get the same user experience (UX) across devices. This is where using Bootstrap makes it all easier!

2. It must convey meaning in ONE word: Once a user sees your Navbar they should immediately understand what each url represents. Thus I recommend using single words which convey meaning immediately. Like our example URLs thus:

                    Home | About | Contact | FAQs | Blog  

HOW TO BUILD A FIXED TO TOP NAVBAR USING BOOTSTRAP

I created a gist with the code and I left comments in it which explains a sequential step by step process to build it.

Here's a codepen example which shows how it works. Scroll up and down the page to see the fixed Navbar in action.

Well if you have read this far and been able to implement it, CONGRATULATIONS!

I simply love using bootstrap because of the ease with which you can achieve accomplishing styling tasks that might take hours if not days to hand code especially taking into consideration different device sizes.