Something wonderful is gonna happen!
Intro Root Texts Colors Layout Containers

#Menus

Basic responsive and not responsive top menu

Simple not responsive menu

The default colors of the menus come from the brand color palette.

<nav class="be-nav">
      <ul class="be-nav-basic">
          <li><a href="#">Home</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
</nav>

It can be customized simply by adding a couple of classes.

<nav class="be-bg-wet-asphalt">
    <ul class="be-nav-basic">
         <li><a href="#">Home</a></li>
         <li><a href="#">Blog</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
    </ul>
</nav>

In the example below the be-dark-dark class has been added to give the menu a dark appearance, then the edges have been rounded with the be-bdr-pill class, the text have been centered with be-text-center, and finally the Home hover has been made to be peter-river color.

<nav class="be-dark-dark be-bdr-pill">
    <ul class="be-nav-basic be-text-center">
         <li class="be-hover-peter-river"><a href="#">Home</a></li>
         <li><a href="#">Blog</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
    </ul>
</nav>

Responsive nav menu

Menus has two main classes: the first be-nav-menu that specify the type of menu, and the second one be-nav that groups the list op options within the be-nav-items class.

<nav class="be-nav-menu">
    <input type="checkbox" id="menu-toggle">
    <label for="menu-toggle" class="be-burger"></label>
   <div class="be-nav">
        <ul class="be-nav-items">
            <li><a href="/" class="be-not-color"><img src="images.png" alt="image"></a>
            </li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
   </div>
</nav>

Menu elements position

You can also change the position of one menu element to be opposite site of the bar, by using the class be-align-right, or you can give a different hover color to one menu option.

In addition, some generic classes can be used that add a touch of style as a small border on the left side with the brand color.

The burger is on the left by default, but can be moved on the right by adding the be-burger-right class right after the be-burger class.

<nav class="be-nav-menu">
    <input type="checkbox" id="menu-toggle">
    <label for="" class="be-burger be-burger-right"></label>
   <div class="be-nav">
        <ul class="be-nav-items be-bdr-left-10">
            <li><a href="/" class="be-not-color"><img src="images.png" alt="image"></a>
            </li>
            <li class="be-hover-peter-river"><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li class="be-align-right"><a href="#">Contact</a></li>
        </ul>
   </div>
</nav>

Sticky menu

You can use the be-sticky class to keep the menu fixed when the page slides to see the content below.

You can also use the be-fixed class that is used to hold the menu at the top and give it a width of 100%.

<nav class="be-nav-menu be-sticky">
    <input type="checkbox" id="menu-toggle">
    <label for="menu-toggle" class="be-burger be-burger-right"></label>
   <div class="be-nav">
        <ul class="be-nav-items be-text-center"><!-- align to center-->
            <li class="be-align-left"><a href="/" class="be-not-color"><img src="images.png" alt="image"></a>
            </li>
            <li class="be-hover-peter-river"><a href="#">Home</a></li>
            <li class="be-hover-peter-river"><a href="#">Products</a></li>
            <li class="be-hover-peter-river"><a href="#">News</a></li>
            <li class="be-hover-peter-river"><a href="#">About</a></li>
            <!--item below is align to right-->
            <li class="be-align-right be-hover-peter-river"><a href="#">Contact</a></li>
        </ul>
   </div>
</nav>

Menu colors

By default, the menu assumes a color scheme based on brand colors. However they can be changed directly in the html.

<nav class="be-nav-menu be-bg-white">
    <input type="checkbox" id="menu-toggle">
    <label for="menu-toggle" class="be-burger be-bg-black be-burger-left"></label>
   <div class="be-nav be-bg-white">
        <ul class="be-nav-items be-bg-white be-text-black">
            <li><a href="/" class="be-not-color"><img src="image.png" alt="image"></a>
            </li>
            <li class="be-hover-black"><a href="#">Home</a></li>
            <li class="be-hover-black"><a href="#">Blog</a></li>
            <li class="be-hover-black"><a href="#">About</a></li>
            <li class="be-hover-black"><a href="#">Contact</a></li>
        </ul>
   </div>
</nav>
Look for hack-nav-menu. Use the be-nav-menu and be-nav-items classes to change the background color.