<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
</style>
</head>
<body>
<div class="container-fluid bg-primary" style="height: 180px">
<h2>topo</h2>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est dicta praesentium beatae nostrum earum atque qui culpa at perferendis labore autem mollitia sunt provident excepturi porro aliquam, voluptas debitis ut illum aliquid, incidunt facilis assumenda. Natus, illo unde voluptatum quisquam adipisci ipsam voluptatem praesentium quo officia quia nemo, tempora voluptates non asperiores magni eum. Culpa voluptatibus quasi commodi sed at unde. Et eius, quam quis architecto aliquam autem soluta labore maxime tempora doloremque laboriosam ab commodi rem vel asperiores quia repudiandae? Et, ab. Distinctio a iure nobis repellat aliquam consectetur placeat, inventore cupiditate quae veniam quidem, voluptates amet maiores voluptatem asperiores quam dolorem ipsa dolores! Nam aliquam esse voluptatum libero dolores sit suscipit quaerat, sequi mollitia nemo in veritatis ipsum ratione enim cum optio. Molestias vitae officia nemo corrupti impedit libero deserunt. Delectus, ex. Odit, earum? Asperiores soluta excepturi expedita at ducimus numquam nobis doloribus ipsam cum iure, impedit tempore. Quibusdam magni ullam nisi nobis dolore reiciendis quidem me nobis delectus sed ex illo, aut ratione autem animi doloribus ut? Et fugit exercitationem facilis culpa itaque est debitis sint id, rerum aliquid nemo ipsa veniam. Officiis, numquam. Necessitatibus consectetur iure, dolor aperiam reiciendis ut sed, asperiores sunt velit corrupti culpa quas recusandae sapiente laborum fugiat. Dicta illum earum tenetur corporis, maiores mollitia doloribus ipsa culpa, aspernatur, nulla maxime! Nostrum necessitatibus, autem velit, quo perferendis expedita ex illum cupiditate quaerat odio cumque officiis soluta dicta magni voluptatem nobis laboriosam recusandae nisi excepturi at fuga hic aliquam. Fuga ex nostrum ipsam aliquid repellendus veritatis incidunt? Commodi accusantium consequatur vitae exercitationem dicta, in eveniet accusamus nisi inventore expedita eaque nihil placeat minima, maiores sequi. Quos pariatur eligendi distinctio minima. Eum possimus doloribus optio perspiciatis dicta veritatis porro reiciendis soluta corporis tenetur numquam fugit suscipit voluptatum harum tempora cum, quam dolorum debitis sapiente animi vitae! Repellat minus voluptas vero error officia voluptatem impedit, ab cupiditate dolorem aut. Reiciendis aliquid odio voluptates. Optio necessitatibus voluptas praesentium commodi, culpa omnis laudantium quis adipisci nisi reiciendis veniam voluptatibus maiores at architecto sed sint tenetur quos molestiae. Eligendi pariatur possimus eaque repellendus! Delectus ab consequuntur fugiat, laudantium accusamus id. In ipsum perspiciatis officiis? Sequi repellat ducimus, veritatis id consequatur repudiandae similique fugit explicabo, nam assumenda unde! Nesciunt voluptate nisi exercitationem modi qui velit vero aut facere dolor eveniet voluptatem magni quos vel ut placeat magnam, repellendus voluptatum! Tenetur veniam nostrum alias aperiam optio deserunt minima pariatur. Nulla, repudiandae. Libero, ab? Vitae voluptatem minus magnam ullam minima voluptas dolorum? Deleniti deserunt facilis quisquam ipsam? Ipsum, harum? Reprehenderit, veritatis. Nulla totam, aspernatur explicabo necessitatibus quasi fugit! Laboriosam mollitia voluptate architecto sint maiores, culpa ab necessitatibus sunt illo officia vitae iste ut ex? Voluptatibus saepe eligendi amet autem
</p>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>
Study a lot <em>CSS Grid or Flexbox</em> and you can implement navbars like that your way. In addition, there are several websites that have UI Kits for free and that you just need to tailor to the size/layout of your website. Some developers use: <br> <Strong>https://interfacer.xyz/</Strong><br> <Strong>https://mdbootstrap.com/freebies/</Strong><br> <Strong>https://startboot.com/themes/</Sstrapg><br>
– Laura Beatris