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>