BootAMP by

Navbar

Brand


<!-- As link -->
<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0 pl2 pr4">    
  <nav class="ampstart-headerbar-nav ampstart-nav ">
    <header><a href="#">Navbar</a></header>
  </nav>
</header>
<!-- As a heading --> 
<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0 pl2 pr4">
  <nav class="ampstart-headerbar-nav ampstart-nav">
    <header><span>Navbar</span></header>
  </nav>
</header>
                

<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0 pl2 pr4">
  <a href="#">
    <amp-img src="img/bootstrap-amp/sidebar-example-logo.png" width="110" height="33" layout="fixed" class="mt2 mx-auto" alt="Example logo image"></amp-img>
  </a>
</header>
                
Navbar

<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0 pl2 pr4">
  <a href="#" class="text-decoration-none my2">
    <amp-img src="img/bootstrap-amp/sidebar-example-logo.png" width="110" height="33" layout="fixed" class="mx2" alt="Example logo image"></amp-img>Navbar
  </a>
</header>
                

Forms


<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0">
  <nav class="ampstart-headerbar-nav ampstart-nav">
    <ul class="list-reset center m0 p1 flex flex-wrap">
      <li class="ampstart-nav-item col-10 sm-col-6 md-col-4">
        <div class="ampstart-input relative m0 p0 my1">
          <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Search">
          <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
        </div>
      </li>
      <li class="ampstart-nav-item col-10 sm-col-6 md-col-4 mt1">
        <button class="ampstart-btn ampstart-btn-secondary left">Search</button>
      </li>
    </ul>
  </nav>
</header>
                

<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0">
  <nav class="ampstart-headerbar-nav ampstart-nav inline-block flex">
    <header class="mt2 ml1 col-2">Navbar</header>
    <ul class="list-reset center m0 p0 flex flex-wrap justify-end items-end col-10 pl1">
      <li class="ampstart-nav-item col-3 px2 sm-col-4 md-col-4 my1 flex flex-wrap justify-center">
        <div class="ampstart-input relative mb2 inline-block0 px2">
          <input type="text" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Search">
          <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
        </div>
      </li>
      <li class="ampstart-nav-item col-9 sm-col-4 md-col-4 my1 flex flex-wrap justify-start">
        <button class="ampstart-btn ampstart-btn-secondary mb2 inline-block">Search</button>
      </li>
    </ul>
  </nav>
</header>
                

Text


<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0 pl1">
  <nav class="ampstart-headerbar-nav ampstart-nav">
    <span>Navbar text with an inline element</span>
  </nav>
</header>
                  

Mix and match with other components and utilities as needed.


<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0">
  <nav class="ampstart-headerbar-nav ampstart-nav flex flex-wrap justify-between">
    <ul class="list-reset center m0 p0 flex flex-wrap left">
      <li class="ampstart-nav-item px0">
        <header>Navbar</header>
      </li>
      <li class="ampstart-nav-item px0">
        <a href="#" class="text-decoration-none block">Home</a>
      </li>
      <li class="ampstart-nav-item px0">
        <a href="#" class="text-decoration-none block">Menu</a>
      </li>
      <li class="ampstart-nav-item px0">
        <a href="#" class="text-decoration-none block">About</a>
      </li>
    </ul>
    <ul class="list-reset center m0 p0">
      <li class="ampstart-nav-item">
        <span>Text inline element</span>
      </li>
    </ul>
  </nav>
</header>
                

Placement

Default


<header class="ampstart-headerbar flex justify-start items-center ampstart-card top-0 left-0 right-0 pl2 pr4">   
  <nav class="ampstart-headerbar-nav ampstart-nav">       
    <header><a href="#">Default</a></header>   
  </nav>
</header>
                    

<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0 pl2 pr4"> 
  <nav class="ampstart-headerbar-nav ampstart-nav">       
    <header>
      <a href="#">Fixed top</a>
    </header> 
  </nav>
</header>