O'Reilly logo

Bootstrap 4 – Responsive Web Design by Jason Marah, Benjamin Jakobus, Matt Lambert, Silvio Moreto

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required