BootStrap .navbar Class

Most designers use a horizontal menu bar at the top of their web page. We can prepare this menu in the view we want using CSS. However, we may have difficulties in providing the flexibility and mobile compatibility we want on our web page.

We can say that perhaps the most important convenience BootStrap provides us is the navbar class. 

By using this css class, which takes its name from the abbreviation of  "Navigation Bar", we can easily create a horizontal menu and place elements in the form of buttons, links or drop-down menus.

Most importantly, this menu will automatically adapt to the current screen width, and if desired, it will become a pop-up menu (with collapse feature) on xs screens.

In the topic examples section, there is a simple web page prepared using the navbar. By clicking the Try It Yourself button, you can examine the codes and see the new version by making changes.

Here, let's write an example of a menu for clarification:

To begin with, we open a nav (also div) tag and apply the navbar and navbar - default classes. The navbar-default gives it a light gray appearance. If desired, a dark appearance can be achieved by using the navbar-inverse class instead . We can also give these classes different appearances with our own css codes.

Then a container-fluid applied div will open and all menu elements will go inside it. 

The menu in the example is designed to become a drop-down menu by combining on xs screens. The button whose codes you see will appear on xs screens (not visible on larger screens) and will enable the menu to be opened and closed. Make sure that the value given to the data-target property matches the menu id at the bottom. The span tags with the icon-bar class applied in the button cause 3 lines to appear one under the other.

Just below the button is an a tag with navbar-brand applied. Usually the site name or logo is placed and a link is given to the main page.

You may have noticed that the button and navbar-brand parts are inside the div where the navbar-header is applied. The navbar-brand element is set to appear on all screen widths, and the button.navbar-toggle is set to appear only on xs screens.

Next comes a div tag with the collapse property applied. This collapse class makes the menu pop-up on xs screens. If we do not want to use this feature, that is, if we want our navbar to look the same on the small screen, we can pass directly to the ul tag without opening this div. Of course, in this case, we should also remove the button above, because there will be no menu to open and close, so it will not work.

In ul class="nav navbar-nav" we place our links with text view. We can make it more obvious by applying the active class to one of these elements, or we may not use the active class.

When the ul tag is finished, you see an example button . We may also use buttons instead of, or in addition to, text-looking links. Also remember that we can make normal links look different with our own css code.

The links in navbar-nav will be placed in the menu starting from the left. If we want some elements to be placed on the right side, we can write them in ul class="nav navbar-nav navbar-right ".

It's that easy. By copying the code in this example, you can increase the number of desired elements, remove the ones you don't want, and apply your own css styles to some of them. So you can easily create your own menu. As well as being mobile friendly.

EXERCISES