10 Custom Bootstrap Navbar Examples

Aug. 4, 2020, 3:06 p.m.

Bootstrap · 27 min read

10 Custom Bootstrap Navbar Examples

Bootstrap provides several navigation bars within the documentation. Branding, color schemes, and placement are all covered on the page, but it can be difficult to understand how to customize the existing Bootstrap Navbar. 

Below are 10 custom navigation bars built from the original Bootstrap Navbar. These code snippets are taken from CodePen and we are in no way claiming them as our own.

We just want to highlight these user-submitted code samples.

As always, links to the code and user profiles are provided below.

 

Using Bootstrap CDN

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!--Bootstrap CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  </head>
  <body>

    ...

    <!-- Optional Javascript -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

If you are looking to quickly add Bootstrap to your project, we recommend using the CDNs. Alternatively, you can download Bootstrap.

 

Bootstrap Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <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="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

This is the basic navigation bar provided by the Bootstrap documentation. All of the code snippets provided below will be using a similar element structure.

 

Attaching a stylesheet or JavaScript file

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!--Bootstrap CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!--Custom CSS-->
    <link rel="stylesheet" href="{% static 'css/stylesheet.css'%}" type="text/css">
  </head>
  <body>

    ...

    <!-- Optional Javascript -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

 

If you wish to use a stylesheet or separate JavaScript file and are using Django, check out the article Manage Django Static Files for more information. 

 

Bootstrap Responsive Navbar

By Muluneh Awoke 

Check out this code snippet if you are looking for a strong, visually-interesting navigation bar. It features several links along with a drop-down menu. And when in a mobile viewport, two dropdown menus are displayed. 

 

HTML Code

<nav class="navbar navbar-default navbar-custom">
  <div class="container">
    
    <div class="navbar-header">
      <a class="navbar-brand" href="#">BRAND</a>
    </div>

    <div class="navs-container text-uppercase">
      
      <ul class="nav navbar-nav navbar-right visible-lg visible-md">
        <li><a href="#">F</a></li>
        <li><a href="#">T</a></li>
        <li><a href="#">I</a></li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="search-box" id="search-box">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search...">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
              <button type="button" class="btn btn-default toggle-hide hidden-md hidden-lg" data-target="#search-box"><span class="glyphicon glyphicon-remove"></span></button>
            </span>
          </div>          
        </div>
        <button type="button" data-target="#search-box" class="btn btn-default visible-xs visible-sm toggle-display"><span class="glyphicon glyphicon-search"></span></button>
      </form>
      
      <ul class="nav navbar-nav navbar-nav-primary">
        <li class="has-dropdown-custom">
          <a href="#" role="button">Dropdown <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
          <ul class="dropdown-custom lefter">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li class="has-dropdown-custom visible-sm visible-xs">
          <a href="#" role="button">Dropdown <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
          <ul class="dropdown-custom righter">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
                  
    </div>
  </div>
  
  <div class="navs-secondary visible-lg visible-md">
    <div class="container">
      <ul class="nav navbar-nav text-uppercase">
        <li><a href="#">Link #1</a></li>
        <li><a href="#">Link #2</a></li>
        <li><a href="#">Link #3</a></li>
        <li><a href="#">Link #4</a></li>
        <li><a href="#">Link #5</a></li>
        <li><a href="#">Link #6</a></li>
        <li><a href="#">Link #7</a></li>
        <li><a href="#">Some long ones</a></li>
      </ul>
    </div>
  </div>
  
  
</nav>

 

View on CodePen

 

Bootstrap Big Logo

By Desain 360

This navigation bar uses a large amount of space to display a logo. But on the scroll down, the logo transitions to a small logo fixed to the top of the page. 

 

HTML Code

   <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="small-logo-container">
            <a class="small-logo" href="#">↥Small Logo</a>
          </div>
        </div>
        <div class="navbar-collapse collapse">
          
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Active</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container-fluid big-logo-row">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 big-logo-container">
            <h1 class="big-logo">↧Big Logo</h1>
          </div><!--/.col-xs-12 -->
        </div><!--/.row -->
      </div><!--/.container -->
    </div><!--/.container-fluid -->

    <div class="container">
      <div class="row">
        <div class="col-lg-5 col-md-6 col-sm-8">
          <h2>Lorem ipsum</h2>
          <p>Dolor sit amet, consectetur adipisicing elit. Id maxime repellat repellendus porro voluptas laudantium similique eveniet quis perferendis beatae commodi sunt ullam provident dolorum doloribus esse accusamus dolores. Corrupti.</p>
          <p>Consectetur incidunt voluptatibus ipsa nisi esse eos deleniti repudiandae at quo sit praesentium nemo optio perspiciatis sequi quaerat voluptates minus reprehenderit doloremque accusamus et quisquam nesciunt sunt consequatur explicabo excepturi!</p>
          <p>Sequi facilis ea dolor asperiores quibusdam eveniet optio corporis et accusantium voluptatem architecto quis iste recusandae molestias dolorem soluta ex blanditiis illo impedit laborum iusto? Iure sapiente eos molestiae est?</p>
          <p>Numquam delectus recusandae nesciunt rem itaque harum corporis maxime hic iste molestias adipisci excepturi ullam libero necessitatibus cum eum modi minus obcaecati est nemo quia velit earum perferendis consectetur porro?</p>
          <p>Accusamus dicta consequatur quos ipsum rerum tempora assumenda ex excepturi itaque soluta magnam debitis voluptatibus neque eos porro. Neque tempora ea beatae delectus facere quas voluptas accusamus maxime enim consequuntur.</p>
          <p>Saepe obcaecati facilis dolore numquam nam quod laudantium. Rerum esse voluptas eum aut porro beatae adipisci exercitationem ab voluptatum corporis quas placeat sapiente nisi ut officia eaque debitis. Corrupti eveniet!</p>
          <p>Eius natus numquam tempore alias ipsam commodi aut similique corporis beatae velit maxime obcaecati voluptatibus cum repudiandae minus inventore doloremque optio saepe nihil eum reprehenderit quas consequuntur perspiciatis quo quam.</p>
          <p>Ea perspiciatis incidunt unde ipsam cupiditate necessitatibus magnam quod odit. Beatae adipisci non praesentium tenetur dolores fugit repellat consequuntur unde aperiam eligendi ipsa doloribus corporis officiis ipsam quod numquam assumenda!</p>
          <p>Ullam ut ex cum corporis numquam quia hic aut nisi itaque laboriosam eaque earum commodi nulla magni voluptate reiciendis laborum esse odit blanditiis aperiam veniam eos velit similique eveniet ad.</p>
          <p>Esse veritatis inventore explicabo hic consequuntur ex autem praesentium quaerat blanditiis illo deleniti dolorum porro tenetur. Repellat sed repellendus natus cum molestias numquam vitae vel eum voluptatem praesentium tempora quae.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est nostrum consequatur odit eius blanditiis sit mollitia ut porro cumque nam repudiandae accusantium nisi excepturi corporis incidunt inventore ipsam? Officiis eum!</p>
          <p>Nostrum minus dicta quod totam autem ipsum illo velit labore obcaecati est ducimus ullam sit iusto ea pariatur sint nulla perferendis modi dolorum cumque non laboriosam ratione maiores possimus numquam!</p>
          <p>Deserunt ex dolor atque sapiente suscipit aspernatur et iste necessitatibus enim magni blanditiis quaerat rerum perspiciatis expedita magnam nihil neque natus quos quidem veritatis eligendi dolorem itaque laboriosam beatae dolores!</p>
          <p>Nostrum tenetur rem cum tempora sapiente at possimus assumenda ex quos illum facilis quibusdam facere voluptatum. Necessitatibus tempore animi earum inventore quaerat sit velit totam rem nulla consequuntur dolorem architecto!</p>
          <p>Illum doloremque ipsa magni fugiat explicabo nam officiis expedita architecto voluptatem beatae deserunt optio iusto nostrum facere voluptatum. Tempora dolore quasi vero aut voluptatem eaque nobis iusto enim dignissimos molestias!</p>
        </div><!--/.col-xs-12 -->
      </div><!--/.row -->
    </div><!--/.container -->

 

View on CodePen

 

Centered Progress Navbar

By Sugarskill

The navbar linked below has a progress bar look. The links are in the shape of arrows and on hover, the links change color. 

 

HTML Code

<!-- Intro -->
<header class="demo-header">
<h1>Centred progress navbar<br />
  <small>[CSS] [Bootstrap]</small></h1>

</header>

<!-- Demo -->
  <nav class="navbar navbar-menu" role="navigation">

    <!-- Collect the nav links, forms, and other content for toggling -->
    
      <div class="navbar-main-container">
        <ul class="nav navbar-nav navbar-main" id="main-nav"><li class="navbar-item"><a href="/learn/"><span class="icon-arrow-right">Plan<br/><small>Analysis and goals</small></span></a></li><li class="navbar-item"><a href="/participate/"><span class="icon-arrow-right">Design<br/><small>Look and structure</small></span></a></li><li class="navbar-item"><a href="/share/"><span class="icon-arrow-right">Develop<br/><small>Experience and usability</small></span></a></li></ul>
    </div>
  </nav>


<!-- Credits -->
<footer class="demo-footer">
  <p><small>Customised and used in project: <a href="http://www.relayforlife.org.au/" target="_blank">Relay For Life</a> by <a href="http://www.sugarskill.com" target="_blank">Sugarskill</a> for <a href="https://www.orchard.com.au" target="_blank">Orchard Marketing</small></p>
</footer>

 

View on CodePen

 

Navbar Transition on Scroll

By Simon Vrachliotis

This navbar is a great example of how to create a transition navigation that goes from transparent to solid blue once it passes the designated scroll position. With this code, you can create a navigation bar that is transparent over the cover of the call to action section but solid when scrolling over the remaining page content. 

The code is provided in Pug, Stylus, and Babel formatting so you will need to view the compiled code to view standard HTML, CSS, and JS. 

 

HTML Code

<!-- available colors: primary | secondary | white | ghost-->
<!-- available sizes: xl | lg | md | sm-->
<!-- the bootstrap navbar-->
<nav class="navbar navbar-fixed-top navbar--color--ghost navbar--size--xl" data-startColor="navbar--color--ghost" data-startSize="navbar--size--xl" data-intoColor="navbar--color--secondary" data-intoSize="navbar--size--md">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#mobileNav" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">ElasticNav.</a>
    </div>
    <div class="collapse navbar-collapse" id="mobileNav">
      <p class="navbar-right navbar-text">Scroll down to trigger the nav transition.</p>
    </div>
  </div>
</nav>
<!-- some content to allow scrolling :)-->
<div class="hero">
  <div class="overlay"></div>
</div>
<div class="main-content">
  <section>
    <div class="container">
      <h2>Your journey starts here.</h2>
      <p> This is it. You've made it so far. There is no going back.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae quaerat ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime nisi a consequuntur?</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam magnam corporis aut.</p>
      <h3>Get lost and find yourself.</h3>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere veritatis culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum! Dolor accusamus labore, sequi.</p>
    </div>
  </section>
  <section>
    <div class="container">
      <h2>Your journey starts here.</h2>
      <p> This is it. You've made it so far. There is no going back.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae quaerat ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime nisi a consequuntur?</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam magnam corporis aut.</p>
      <h3>Get lost and find yourself.</h3>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere veritatis culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum! Dolor accusamus labore, sequi.</p>
    </div>
  </section>
  <section>
    <div class="container">
      <h2>Your journey starts here.</h2>
      <p> This is it. You've made it so far. There is no going back.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae quaerat ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime nisi a consequuntur?</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam magnam corporis aut.</p>
      <h3>Get lost and find yourself.</h3>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere veritatis culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum! Dolor accusamus labore, sequi.</p>
    </div>
  </section>
  <section>
    <div class="container">
      <h2>Your journey starts here.</h2>
      <p> This is it. You've made it so far. There is no going back.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae quaerat ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime nisi a consequuntur?</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam magnam corporis aut.</p>
      <h3>Get lost and find yourself.</h3>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere veritatis culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum! Dolor accusamus labore, sequi.</p>
    </div>
  </section>
  <section>
    <div class="container">
      <h2>Your journey starts here.</h2>
      <p> This is it. You've made it so far. There is no going back.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae quaerat ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime nisi a consequuntur?</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam magnam corporis aut.</p>
      <h3>Get lost and find yourself.</h3>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere veritatis culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum! Dolor accusamus labore, sequi.</p>
    </div>
  </section>
  <section>
    <div class="container">
      <h2>Your journey starts here.</h2>
      <p> This is it. You've made it so far. There is no going back.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae quaerat ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime nisi a consequuntur?</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam magnam corporis aut.</p>
      <h3>Get lost and find yourself.</h3>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere veritatis culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum! Dolor accusamus labore, sequi.</p>
    </div>
  </section>
  <section>
    <div class="container">
      <h2>Your journey starts here.</h2>
      <p> This is it. You've made it so far. There is no going back.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae quaerat ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime nisi a consequuntur?</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam magnam corporis aut.</p>
      <h3>Get lost and find yourself.</h3>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere veritatis culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum! Dolor accusamus labore, sequi.</p>
    </div>
  </section>
  <section>
    <div class="container">
      <h2>Your journey starts here.</h2>
      <p> This is it. You've made it so far. There is no going back.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae quaerat ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime nisi a consequuntur?</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam magnam corporis aut.</p>
      <h3>Get lost and find yourself.</h3>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere veritatis culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum! Dolor accusamus labore, sequi.</p>
    </div>
  </section>
  <section>
    <div class="container">
      <h2>Your journey starts here.</h2>
      <p> This is it. You've made it so far. There is no going back.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae quaerat ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime nisi a consequuntur?</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam magnam corporis aut.</p>
      <h3>Get lost and find yourself.</h3>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere veritatis culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum! Dolor accusamus labore, sequi.</p>
    </div>
  </section>
</div>

 

View on CodePen

 

Minimal Bootstrap Navbar

By Zachary Kahl

Kahl created a minimal Bootstrap navbar that displays icons on the initial page load. But when you hover over each icon, the coordinating text appears to the right of the icon. That way the navigation bar maintains a minimal aesthetic while also providing helpful user information.

 

HTML Code

<!-- Options -->
<div id="nav-colors">
	Navbar
	<button id="pink" class="btn"></button>
	<button id="red" class="btn"></button>
	<button id="purple" class="btn"></button>
	<button id="blue" class="btn"></button>
	<button id="green" class="btn"></button>
	<button id="yellow" class="btn"></button>
	<button id="orange" class="btn"></button>
</div>
<div id="font-colors">
	Font
	<button id="white" class="btn"></button>
	<button id="black" class="btn"></button>
</div>
<div id="edges">
	Edges
	<button id="rounded" class="btn">Rounded</button>
	<button id="square" class="btn">Square</button>
</div>
<h1>Minimal Bootstrap Navbar</h1>
<nav class="navbar">
	<div class="container-fluid">
		<!-- Nav Header -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#"><span class="fa fa-home"></span><span class="link"> Home</span></a>
		</div>
		<!-- Nav Collapse -->
		<div class="navbar-collapse collapse" id="collapse-1">
			<!-- Nav Left -->
			<ul class="nav navbar-nav">
				<!-- Products -->
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
						<span class="fa fa-tags"></span><span class="link"> Products</span> <span class="fa fa-caret-down"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#"><span class="fa fa-tag"></span> Catalogue 1</a></li>
						<li><a href="#"><span class="fa fa-tag"></span> Catalogue 2</a></li>
					</ul>
				</li>
				<!-- Services -->
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
						<span class="fa fa-gears"></span><span class="link"> Services</span> <span class="fa fa-caret-down"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#"><span class="fa fa-gear"/></span> Service 1</a></li>
						<li><a href="#"><span class="fa fa-gear"/></span> Service 2</a></li>
						<li><a href="#"><span class="fa fa-gear"/></span> Service 3</a></li>
					</ul>
				</li>
				<!-- About -->
				<li><a href="#"><span class="fa fa-info-circle"></span><span class="link"> About</span></a></li>
				<!-- Contact -->
				<li><a href="#"><span class="fa fa-phone"></span><span class="link"> Contact</span></a></li>
			</ul>
			<!-- Nav Right -->
			<form class="navbar-form navbar-right">
				<div class="form-group">
					<input type="text" class="form-control" placeholder="Search">
				</div>
				<button type="submit" class="btn"><span class="fa fa-search"></span></button>
			</form>
		</div>
	</div>
</nav>

 

View on CodePen

 

Bootstrap Sidenavbar

By Abhishek Parmar

Unlike the other custom navigation bars, this custom Bootstrap navbar is a side navigation. When displayed on a mobile device, the navigation appears on the top of the page. 

 

HTML Code

<div class="container-fluid h-100">
    <div class="row h-100">
        <aside class="col-12 col-md-2 p-0 bg-dark fixed-top">
            <nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start py-2">
                <div class="collapse navbar-collapse align-items-start">
                    <ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between">
                        <li class="nav-item">
                            <a class="nav-link pl-0 text-nowrap" href="#"><i class="fa fa-bullseye fa-fw"></i> <span class="font-weight-bold">Traffic Lives</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link pl-0" href="#"><i class="fa fa-home fa-fw"></i> <span class="d-none d-md-inline">Home</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link pl-0" href="#"><i class="fa fa-book-open fa-fw"></i> <span class="d-none d-md-inline">Stories</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link pl-0" href="#"><i class="fa fa-blog fa-fw"></i> <span class="d-none d-md-inline">Blogs</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link pl-0" href="#"><i class="fa fa-pencil-alt fa-fw"></i> <span class="d-none d-md-inline">Submit Us</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link pl-0" href="#"><i class="fa fa-users fa-fw"></i> <span class="d-none d-md-inline">About Us</span></a>
                        </li>
                    </ul>
                </div>
            </nav>
        </aside>
        
    </div>
</div>

 

View on CodePen

 

Bootstrap Navbar Papillon Style

By Omar Hasan

The navigation bar linked below has a unique style. The navbar appears a ribbon with each link appearing in a fold. The developer offers four different default colors to choose from and mobile compatibility is built-in.

HTML Code

<html>

    <head>
        <meta charset="utf-8">
        <!--IE Compatibility Meta-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--First Mobile Meta-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    </head>

    <body>
        <!--********** Start Navbar 1 **********-->
        <nav class="navbar navbar-inverse navbar-fixed-top" id="navBar1">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <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>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hvr-buzz-out" href="#">LOGO
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="">
                            <a href="#">Home
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="">
                            <a href="#">About</a>
                        </li>
                        <li class="">
                            <a href="#">Company</a>
                        </li>
                        <li class="">
                            <a href="#">services</a>
                        </li>
                        <li class="">
                            <a href="#">location</a>
                        </li>
                        <li class="">
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <!--********** End Navbar 1 **********-->
        <!--********** Start Navbar 2 **********-->
        <nav class="navbar navbar-inverse navbar-fixed-top" id="navBar2">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <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>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hvr-buzz-out" href="#">LOGO
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="">
                            <a href="#">Home
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="">
                            <a href="#">About</a>
                        </li>
                        <li class="">
                            <a href="#">Company</a>
                        </li>
                        <li class="">
                            <a href="#">services</a>
                        </li>
                        <li class="">
                            <a href="#">location</a>
                        </li>
                        <li class="">
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <!--********** End Navbar 2 **********-->
        <!--********** Start Navbar 3 **********-->
        <nav class="navbar navbar-inverse navbar-fixed-top" id="navBar3">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <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>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hvr-buzz-out" href="#">LOGO
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="">
                            <a href="#">Home
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="">
                            <a href="#">About</a>
                        </li>
                        <li class="">
                            <a href="#">Company</a>
                        </li>
                        <li class="">
                            <a href="#">services</a>
                        </li>
                        <li class="">
                            <a href="#">location</a>
                        </li>
                        <li class="">
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <!--********** End Navbar 3 **********-->
        <!--********** Start Navbar 4 **********-->
        <nav class="navbar navbar-inverse navbar-fixed-top" id="navBar4">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <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>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hvr-buzz-out" href="#">LOGO
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="">
                            <a href="#">Home
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="">
                            <a href="#">About</a>
                        </li>
                        <li class="">
                            <a href="#">Company</a>
                        </li>
                        <li class="">
                            <a href="#">services</a>
                        </li>
                        <li class="">
                            <a href="#">location</a>
                        </li>
                        <li class="">
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <!--********** End Navbar 4 **********-->
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/wow.min.js"></script>
        <script>
            new WOW().init();
        </script>

    </body>

</html>

 

View on CodePen

 

Bootstrap Navigation

By Logan Harber

While this code is simple in comparison to the other code snippets, Harber provides a clean look at a three-sectioned navigation bar that cleanly collapses into on drop-down menu when on mobile. 

 

HTML Code

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button
                type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#nav"
                aria-expanded="false"
                aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar top-bar"></span>
                <span class="icon-bar middle-bar"></span>
                <span class="icon-bar bottom-bar"></span>
            </button>
        </div>
        <a class="navbar-brand" href="#"><img src="https://placehold.it/300x80" alt=""/></a>
        <div id="nav" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About Us</a>
                </li>
                <li>
                    <a href="#">Fims</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#">Packages</a>
                </li>
                <li>
                    <a href="#">Blog</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<section class="content">
    <div class="jumbotron">
        <div class="container">
            <h1>Bootstrap Navbar</h1>
            <p>Bootstrap Navbar that collapses on Mobile and Tablet...</p>
        </div>
    </div>
</section>

 

View on CodePen

 

Bootstrap 4 Mega Dropdown Menu Navbar

By Jacob Lett

While this navigation bar looks like the navbars in the Bootstrap documentation, the dropdown menus have been altered to take up the entire width of the page. This format works well if you have numerous links and/or an image you wish to display in the dropdown.

 

HTML Code

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Mega Dropdown</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Category</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Category 1
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">

          
          <div class="container">
            <div class="row">
              <div class="col-md-4">
                <span class="text-uppercase text-white">Category 1</span>
                <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
              </ul>
              </div>
              <!-- /.col-md-4  -->
              <div class="col-md-4">
                <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
              </ul>
              </div>
              <!-- /.col-md-4  -->
              <div class="col-md-4">
                <a href="">
                  <img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid">
                </a>
                <p class="text-white">Short image call to action</p>

              </div>
              <!-- /.col-md-4  -->
            </div>
          </div>
          <!--  /.container  -->


        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Category 2
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">


          <div class="container">
            <div class="row">
              <div class="col-md-4">
                <span class="text-uppercase text-white">Category 2</span>
                <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
              </ul>
              </div>
              <!-- /.col-md-4  -->
              <div class="col-md-4">
                <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
              </ul>
              </div>
              <!-- /.col-md-4  -->
              <div class="col-md-4">
                <a href="">
                  <img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid">
                </a>
                <p class="text-white">Short image call to action</p>

              </div>
              <!-- /.col-md-4  -->
            </div>
          </div>
          <!--  /.container  -->


        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Category 3
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">


          <div class="container">
            <div class="row">
              <div class="col-md-4">
               <span class="text-uppercase text-white">Category 3</span>
                <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
              </ul>
              </div>
              <!-- /.col-md-4  -->
              <div class="col-md-4">
                <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link item</a>
                </li>
              </ul>
              </div>
              <!-- /.col-md-4  -->
              <div class="col-md-4">

                <a href="">
                  <img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid">
                </a>
                <p class="text-white">Short image call to action</p>
                
              </div>
              <!-- /.col-md-4  -->
            </div>
          </div>
          <!--  /.container  -->


        </div>
      </li>

    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>


</nav>

 

View on CodePen

 

Bootstrap Navbar Custom Collapse Demo

By Gintautas Bakunas

This custom Bootstrap navbar has a clean design a nice collapse feature. In mobile, the links on the left turn into a dropdown menu while the links on the right move to the left. 

 

HTML Code

<nav class="navbar navbar-default navbar-fixed-top mainmenu">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">LOGO<br>HERE</a>
      <div class="custom-menu">
        <ul class="nav navbar-nav tool-items">
          <li class="icon-link"><a href="#"><span>Our jobs</span></a></li>
          <li class="lang-picker">
            <div class="lang lang-current">   <a href="#">EN <span class="caret"></span></a>
            </div>
            <div class="lang list">
                <a href="#">LT</a>
            </div>
          </li>
        </ul>
      </div>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="about.html" class="nav-link">About Us</a></li>
        <li><a href="case-studies.html" class="nav-link">Case Studies</a></li>
        <li><a href="product-overview.html" class="nav-link">Solutions</a></li>
        <li><a href="services.html" class="nav-link">Services</a></li>
        <li><a href="prices.html" class="nav-link">Pricing</a></li>
        <li><a href="blog.html" class="nav-link">News</a></li>
        <li><a href="order-form.html" class="nav-link">Send Query</a></li>
        <li><a href="contacts.html" class="nav-link">Contacts</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="content">
  <div class="container">
    <h1>
      Collapsable navbar demo
    </h1>
    <h3>
      Don't forget to resize your browser window
    </h3>
    <p>
      Quam hendrerit id a netus porta dictumst eu sem adipiscing eleifend curae id euismod malesuada rhoncus ac vel. Conubia elit eleifend condimentum adipiscing volutpat diam in eget consectetur nascetur convallis est lorem adipiscing scelerisque. Id consequat adipiscing eros a eleifend lobortis nullam aliquet suscipit a nam malesuada accumsan risus ipsum curabitur a elit viverra adipiscing nam dictumst aliquam torquent non sociosqu venenatis. Ullamcorper vestibulum metus ullamcorper consectetur velit quisque hac a ac fermentum adipiscing mus mauris ac himenaeos scelerisque. Mi lorem mus euismod nunc erat turpis vel cum mi elementum proin venenatis ipsum dui placerat commodo interdum ipsum eu.
    </p>
    <p>
      Quam hendrerit id a netus porta dictumst eu sem adipiscing eleifend curae id euismod malesuada rhoncus ac vel. Conubia elit eleifend condimentum adipiscing volutpat diam in eget consectetur nascetur convallis est lorem adipiscing scelerisque. Id consequat adipiscing eros a eleifend lobortis nullam aliquet suscipit a nam malesuada accumsan risus ipsum curabitur a elit viverra adipiscing nam dictumst aliquam torquent non sociosqu venenatis. Ullamcorper vestibulum metus ullamcorper consectetur velit quisque hac a ac fermentum adipiscing mus mauris ac himenaeos scelerisque. Mi lorem mus euismod nunc erat turpis vel cum mi elementum proin venenatis ipsum dui placerat commodo interdum ipsum eu.
    </p>
    <p>
      Quam hendrerit id a netus porta dictumst eu sem adipiscing eleifend curae id euismod malesuada rhoncus ac vel. Conubia elit eleifend condimentum adipiscing volutpat diam in eget consectetur nascetur convallis est lorem adipiscing scelerisque. Id consequat adipiscing eros a eleifend lobortis nullam aliquet suscipit a nam malesuada accumsan risus ipsum curabitur a elit viverra adipiscing nam dictumst aliquam torquent non sociosqu venenatis. Ullamcorper vestibulum metus ullamcorper consectetur velit quisque hac a ac fermentum adipiscing mus mauris ac himenaeos scelerisque. Mi lorem mus euismod nunc erat turpis vel cum mi elementum proin venenatis ipsum dui placerat commodo interdum ipsum eu.
    </p>
    <p>
      Quam hendrerit id a netus porta dictumst eu sem adipiscing eleifend curae id euismod malesuada rhoncus ac vel. Conubia elit eleifend condimentum adipiscing volutpat diam in eget consectetur nascetur convallis est lorem adipiscing scelerisque. Id consequat adipiscing eros a eleifend lobortis nullam aliquet suscipit a nam malesuada accumsan risus ipsum curabitur a elit viverra adipiscing nam dictumst aliquam torquent non sociosqu venenatis. Ullamcorper vestibulum metus ullamcorper consectetur velit quisque hac a ac fermentum adipiscing mus mauris ac himenaeos scelerisque. Mi lorem mus euismod nunc erat turpis vel cum mi elementum proin venenatis ipsum dui placerat commodo interdum ipsum eu.
    </p>
    <p>
      Quam hendrerit id a netus porta dictumst eu sem adipiscing eleifend curae id euismod malesuada rhoncus ac vel. Conubia elit eleifend condimentum adipiscing volutpat diam in eget consectetur nascetur convallis est lorem adipiscing scelerisque. Id consequat adipiscing eros a eleifend lobortis nullam aliquet suscipit a nam malesuada accumsan risus ipsum curabitur a elit viverra adipiscing nam dictumst aliquam torquent non sociosqu venenatis. Ullamcorper vestibulum metus ullamcorper consectetur velit quisque hac a ac fermentum adipiscing mus mauris ac himenaeos scelerisque. Mi lorem mus euismod nunc erat turpis vel cum mi elementum proin venenatis ipsum dui placerat commodo interdum ipsum eu.
    </p>
    <p>
      Quam hendrerit id a netus porta dictumst eu sem adipiscing eleifend curae id euismod malesuada rhoncus ac vel. Conubia elit eleifend condimentum adipiscing volutpat diam in eget consectetur nascetur convallis est lorem adipiscing scelerisque. Id consequat adipiscing eros a eleifend lobortis nullam aliquet suscipit a nam malesuada accumsan risus ipsum curabitur a elit viverra adipiscing nam dictumst aliquam torquent non sociosqu venenatis. Ullamcorper vestibulum metus ullamcorper consectetur velit quisque hac a ac fermentum adipiscing mus mauris ac himenaeos scelerisque. Mi lorem mus euismod nunc erat turpis vel cum mi elementum proin venenatis ipsum dui placerat commodo interdum ipsum eu.p Quam hendrerit id a netus porta dictumst eu sem adipiscing eleifend curae id euismod malesuada rhoncus ac vel. Conubia elit eleifend condimentum adipiscing volutpat diam in eget consectetur nascetur convallis est lorem adipiscing scelerisque. Id consequat adipiscing eros a eleifend lobortis nullam aliquet suscipit a nam malesuada accumsan risus ipsum curabitur a elit viverra adipiscing nam dictumst aliquam torquent non sociosqu venenatis. Ullamcorper vestibulum metus ullamcorper consectetur velit quisque hac a ac fermentum adipiscing mus mauris ac himenaeos scelerisque. Mi lorem mus euismod nunc erat turpis vel cum mi elementum proin venenatis ipsum dui placerat commodo interdum ipsum eu.
    </p>
    <p>
      Quam hendrerit id a netus porta dictumst eu sem adipiscing eleifend curae id euismod malesuada rhoncus ac vel. Conubia elit eleifend condimentum adipiscing volutpat diam in eget consectetur nascetur convallis est lorem adipiscing scelerisque. Id consequat adipiscing eros a eleifend lobortis nullam aliquet suscipit a nam malesuada accumsan risus ipsum curabitur a elit viverra adipiscing nam dictumst aliquam torquent non sociosqu venenatis. Ullamcorper vestibulum metus ullamcorper consectetur velit quisque hac a ac fermentum adipiscing mus mauris ac himenaeos scelerisque. Mi lorem mus euismod nunc erat turpis vel cum mi elementum proin venenatis ipsum dui placerat commodo interdum ipsum eu.
    </p>
  </div>
</div>

 

View on CodePen


0
Subscribe now

Subscribe to stay current on our latest articles and promos





Post a Comment
Join the community

0 Comments