Paying attention to your navigation

Bootstrap offers a very nice navigation bar to be placed at the top of website, or even in places where you want that behavior. Let's change our header section to make it our navigation bar. It will stick to the top of the web page, working as a navigation menu.

First of all, let's use a <nav> element and add to it the .navbar and .navbar-default classes, which are required for the component, and the .navbar-fixed-top class to fix the element at the top. Replace the <header> HTML section with the following code:

<nav class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-brand" href="landing_page.html">Company name</a> </div> <div class="navbar-right"> <ul class="nav navbar-nav"> ...

Get Bootstrap 4 By Example now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.