How it works

Here’s what you need to know before getting started with the navbar:

  • For responsive add div with like the class mobile
  • For fixed add the class fixed on the <nav> tag
  • For add content in center of the nav, add div with like class center
  • If you use the <img> tag, it will automatically adapt to the nav
  • You can use the container in the <nav> tag

Read on for an example and list of supported sub-components.


<link href="https://laarmwork.arnaudjacques.fr/res/css/navbar.css" rel="stylesheet">
<link href="https://laarmwork.arnaudjacques.fr/res/css/button.css" rel="stylesheet">
<script src="https://laarmwork.arnaudjacques.fr/res/js/laarmwork.js"></script>
            

Nav


<nav class="m-relative">
   <div class="mobile btn"><i class="fas fa-bars"></i></div>
   <div class="content">
       <div class="left">
            <a class="logo"><img src="/res/img/logo.png"></a>
            <a href="#">Home</a>
            <a href="#">Documentation</a>
            <a href="#">Exemple</a>
            <a href="#">Colors</a>
            <a href="#">Expo</a>
       </div>
       <div class="right">
            <a class="btn" href="#">Download</a>
       </div>
   </div>
</nav>
            

Nav with logo center


<nav class="m-relative">
   <div class="mobile btn"><i class="fas fa-bars"></i></div>
   <div class="content">
       <a class="logo center"><img src="/res/img/logo.png"></a>
       <div class="left">
            <a href="#">Home</a>
       </div>
       <div class="right">
       </div>
   </div>
</nav>
            

Nav with dropdown


<nav class="m-relative">
   <div class="mobile btn"><i class="fas fa-bars"></i></div>
   <div class="content">
       <div class="left">
            <a class="logo"><img src="/res/img/logo.png"></a>
            <a href="#">Home</a>
            <a href="#">Documentation</a>
            <a href="#">Exemple</a>
            <a href="#">Colors</a>
            <a href="#">Expo</a>
       </div>
       <div class="right">
            <a class="btn" href="#">Download</a>
       </div>
   </div>
</nav>