Navbar top & bottom guide for billboard framework

Hi everyone
To use standard nav bar & fixed navbar (top and bottom), just connect the billboard library (CSS & JS) to the web page first (CDN or Local) And then create your blog post box using the code below.

You can find files and CDN billboard framework in following link.

*Recommended connecting the Font Awesome library to the web page to display the fonts icons.

Fixed navbar

for standard nav bar we useing .navi class and .navi-ul for ul of the navbar.

Example for fixed navbar

Fixed Navbar
<!--Menu-->
<header>
<!-- Toggle Menu-->
<div id="full-menu" class="full-menu">
<div class="bcontainer">
<div class="brow">
<div class="bcol navi">
<ul class=navi-ul>
<li class="navi-item brand-section">
Navigation
</li>

<li class="btn-lite-menu close"><i class="fas fa-times"></i></li>
<li><a class="btn-nobg-dark btn-outline btn-navi btn-full-radius">Download</a></li>
<li class=" btn-navi navi-item">
More
</li>

</ul>
<div class="navi-item-mega-menu-ul">
<ul class="navi-item-mega-menu">
<li class="navi-item-mega-menu">
billboard
</li>
<li class="navi-item-mega-menu">
Documents
</li>
<li class="navi-item-mega-menu">
About
</li>
<li class="navi-item-mega-menu">
billboard
</li>
<li class="navi-item-mega-menu">
Documents
</li>
<li class="navi-item-mega-menu">
About
</li>

</ul>
</div>
</div>
</div>

</div>
</div>
<!-- /Toggle Menu-->
<!--Fixed Navi-->
<nav id="fixed-navi" class="fixed-navi blur-webkit">
<div class="brow">
<div class="bcol-6-6 navi">
<ul class=navi-ul>
<li class="navi-item brand-section">
Navigation
</li>
<li class="navi-item">
billboard
</li>
<li class="navi-item">
Documents
</li>
<li class="navi-item">
About
</li>
<li class="btn-lite-menu"><i class="fas fa-bars"></i></li>
<li><a class="btn-nobg-dark btn-outline btn-navi btn-full-radius">Download</a></li>
<li class=" btn-navi navi-item">
More
</li>

</ul>

</div>

</div>
</nav>
<header>
Standard Navbar Mobile Version

Standard Navbar

Example for standard navbar

In this example, the class .blur-webkit is used to blur

<!--Menu-->
<header>
<!-- Toggle Menu-->
<div id="full-menu" class="full-menu">
<div class="bcontainer">
<div class="brow">
<div class="bcol navi">
<ul class=navi-ul>
<li class="navi-item brand-section">
Navigation
</li>

<li class="btn-lite-menu close"><i class="fas fa-times"></i></li>
<li><a class="btn-nobg-dark btn-outline btn-navi btn-full-radius">Download</a></li>
<li class=" btn-navi navi-item">
More
</li>

</ul>
<div class="navi-item-mega-menu-ul">
<ul class="navi-item-mega-menu">
<li class="navi-item-mega-menu">
billboard
</li>
<li class="navi-item-mega-menu">
Documents
</li>
<li class="navi-item-mega-menu">
About
</li>
<li class="navi-item-mega-menu">
billboard
</li>
<li class="navi-item-mega-menu">
Documents
</li>
<li class="navi-item-mega-menu">
About
</li>

</ul>
</div>
</div>
</div>

</div>
</div>
<!-- /Toggle Menu-->
<!--Standard Navi-->
<nav id="standard-navi">

<div class="brow">
<div class="bcol-6-6 navi">
<ul class=navi-ul>
<li class="navi-item brand-section">
Navigation
</li>
<li class="navi-item">
billboard
</li>
<li class="navi-item">
Documents
</li>
<li class="navi-item">
About
</li>
<li class="btn-lite-menu"><i class="fas fa-bars"></i></li>
<li><a class="btn-nobg-dark btn-outline btn-navi">Download</a></li>
<li class=" btn-navi navi-item">
More
</li>

</ul>

</div>

</div>
</nav>
</header>
<!--/Menu-->

elbillboard

A free HTML, CSS , JS framework

Amir Mahmoud Mirzargar

Written by

Founder & developer billboard framework , CEO https://thebravo.cc

elbillboard

A free HTML, CSS , JS framework

More From Medium

More on Web Development from elbillboard

More on Web Development from elbillboard

More on Web Development from elbillboard

Radio Button guide for billboard framework

More on Elbillboard from elbillboard

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade