The navbar in Bootstrap
Generally, you require a top bar also called the navigation bar or header or top menu in your website that contains main links to the other parts of the website.
As using the Bootstrap framework, this is quite easy to create a header menu that contains links or other components like a small form, dropdowns etc. The Bootstrap menu is quite easy to customize with your own CSS styles and more importantly menu is responsive as well.
Having a responsive navigation bar is important as it adds good marks as for as SEO and UI are concerned. Since, more searchers are coming from smart devices or mobiles than desktop now and presenting your users adjusted menu to their screens is important for rankings as well as adding good user experience.
I will show you different demos in this tutorial that are simple as well as customized with different components and styles.
A simple Bootstrap navbar demo
You have to use a <nav> tag to initiate a navigation bar that contains the navbar class followed by a series of different classes for links or components in the navigation bar.
See the demo online which is followed by description:
First of all, a nav tag is created that refers the navbar class in Bootstrap framework. Next is the main div that acts as the container of navigation bar which is assigned the container-fluid class.
The next section in the code is to deal with mobile / smartphones for better presentation. The next section is self-descriptive if you look at the code that created links, dropdown menu items, and a form to search the website.
Now let me move ahead with changing the color scheme or adding some style in the above example.
Changing the default colors provided by Bootstrap
One of the default color schemes is shown in the above example that uses the navbar-default (specified in the <nav> tag.
The other scheme that you can use, which is set in the Bootstrap CSS is navbar-inverse class. The same demo will look as this if you change the navbar-default to navbar-inverse.
Only this line of code is changed in the above example:
<nav class="navbar navbar-inverse">
Generally, you need to design a theme of your own that matches the rest of the website. For that, you have to go through the Bootstrap navbar related classes in the Bootstrap CSS and override the default colors.
I will list a few classes here, rest you can see in the demo pages. Let me show you a few designs first for the same Bootstrap menu as used in above example.
Basically, what is done in the above demo is, I have used the same class in the <nav> tag i.e. navbar-default. However, a new color scheme is used to handle different colors that placed in the <style> section of head tag.
You must have to place this style (either external CSS or using style tag) after the Bootstrap’s CSS reference to override it.
Also, note that you do not necessarily need to use the navbar-default class name. Use any class name instead of navbar-default and refer it in the <nav> tag, as shown in the example below:
In the demo page’s code, you can see a custom class is created in the head section which is named as menucls. The same is referred in the <nav> tag:
<nav class=”navbar menucls”>
Following are a few important classes to change the main theme of navbar Bootstrap:
- .menucls To change the background color and border of the main navigation bar.
- .menucls .navbar-nav > li > a: To change the color of the text of menu items.
Just play with different classes to develop it according to the theme of your project or for testing purpose.
Adding and styling forms in Bootstrap menu
As shown in the above examples, a form is added in the menu. In all examples, it is using the same look of textbox while the button is changed, that uses Bootstrap classes.
You may use Bootstrap form’s style along with adding custom classes to match it with other sections of the website.
See the following example where textbox look is changed by adding a custom style:
In the head section of the demo page, you can see a custom CSS class is created, .inputstl, which is assigned to the form controls – textboxes in that case. It added shadows in the textboxes.
Similarly, you may use other form controls in navbar of Bootstrap with customized styling. However, one thing to be considered while using this is the device size.
Since more and more searchers / visitors are coming from mobile devices, your site “must” be mobile friendly. As the size of the screen gets smaller your Bootstrap navbar should adjust accordingly and make sure it does not expand to look ugly. By default, form controls are responsive, though.
Dealing with Bootstrap mobile menu icon
In above examples, all menu bars are responsive that are also using Toggle navigation. If you resize the screen or look at the demos in mobile devices, the navbar will be resized and adjust to the screen. There you can see three horizontal lines to expand the menu:
If you are looking at this demo in wide-screen (Chrome, Firefox or some other browser), then resize the window to as much smaller as it looks like in the figure shown above. The section which is dealing with better mobile visibility is:
<!—For better mobile display-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<a class="navbar-brand" href="#">Web</a>
The three lines are due to the icon-bar class that is used three times in span tag. If you want something else appearing here, for example, some other icon like an envelope or some other image, just modify it or override this class.
How to fix navigation bar on top?
By using the .navbar-fixed-top class in the <nav> tag, you can fix the menu bar on top of the web page. The following examples shows a fixed top bar:
The following line in the body section is changed:
<nav class="navbar menucls navbar-fixed-top">
A menu bar fixed at bottom demo
Similarly, you may fix the menu bar at the bottom of the webp age. The class to be used is navbar-fixed-bottom.
See the following online bottom menu bar:
You can see, just the class navbar-fixed-bottom is used in the <nav> section of code.
A fixed and static top menu
In order to make a top bar menu which is fixed as well, that means, if you scroll down the page, the menu bar will be fixed and visible across.
For that, simply use the navbar-static-top class in the <nav> tag i.e.
<nav class="navbar navbar-static-top menucls">