Navbars

NavBar v0.0.1

Copy this snippet and paste it in your html page's body tag:

<nav class="navbar nav-iv primary mid-animation" > <div class="nav-brand" > <p>NAVBAR</p> <button id="ham-icon" onclick="hamClickHandler();" > ≡ < /button> < /div> <div class="links-container" > <ul class="links" style="" > <li class="link" > Home <hr /> < /li> <li class="link active" > About <hr /> < /li> <li class="link" > Contact <hr /> < /li> < /ul> <ul class="links" style="" > <li class="link" > <i class="fas fa-search icon" >< /i>< /li> <li class="link" > <i class="fas fa-inbox icon" >< /i>< /li> <li class="link avatar-link" > <div class="avatar icon" style=" background-image: url(https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260); width: 42px; height: 42px; position: relative; " >< /div> < /li> < /ul> < /div> < /nav>


NavBar v0.0.2

Copy this snippet and paste it in your html page's body tag:

<nav class="navbar nav-iv secondary mid-animation" > <div class="nav-brand" > <p>NAVBAR</p> <button id="ham-icon" onclick="hamClickHandler();" > ≡ < /button> < /div> <div class="links-container single-ul" > <ul class="links" style="" > <li class="link" > Home <hr /> < /li> <li class="link active" > About <hr /> < /li> <li class="link" > Contact <hr /> < /li> < /ul> < /div> < /nav>


NavBar v0.0.3

Copy this snippet and paste it in your html page's body tag:

<nav class="navbar nav-iv success mid-animation" > <div class="nav-brand" > <p>NAVBAR</p> <button id="ham-icon" onclick="hamSpClickHandler();" > ≡ < /button> < /div> <div class="links-container" > <ul class="links" style="" > <li class="link" > Home <hr /> < /li> <li class="link active" > About <hr /> < /li> <li class="link" > Contact <hr /> < /li> < /ul> <ul class="links" style="" > <li class="link" > <i class="fas fa-search icon" >< /i> <hr /> < /li> <li class="link active" > <i class="fas fa-inbox icon" >< /i> <hr /> < /li> <li class="link" > <i class="fas fa-bell icon" ><span class="badge badge-xsm danger top right br-3 pl-3 pr-3 pt-1 pb-1" >9+</span ></i > <hr /> < /li> <li class="link avatar-link" > <div class="avatar icon" style=" background-image: url(https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260); width: 42px; height: 42px; position: relative; " >< /div> <hr /> < /li> < /ul> < /div> < /nav>


NavBar v0.0.4

Copy this snippet and paste it in your html page's body tag:

<nav class="navbar nav-iv nav-sp dark mid-animation" > <div class="nav-brand" > <p>NAVBAR</p> <ul class="social-links" style="" > <li class="link" > <i class="fab fa-twitter" >< /i> < /li> <li class="link" > <i class="fab fa-facebook-f" >< /i> < /li> <li class="link" > <i class="fab fa-instagram" >< /i> < /li> <li class="link" > <i class="fab fa-linkedin-in" >< /i> < /li> < /ul> < /div> <div class="links-container" > <ul class="links" style="" > <li class="link" > Home <hr /> < /li> <li class="link active" > About <hr /> < /li> <li class="link" > Contact <hr /> < /li> < /ul> <ul class="links" style="" > <li class="link" onclick="hamSp2ClickHandler();" > <button id="ham-icon" >≡< /button> <hr /> < /li> <li class="link" > <i class="fas fa-inbox icon" >< /i> <hr /> < /li> <li class="link active" > <i class="fas fa-bell icon" ><span class="badge badge-xsm danger top right br-3 pl-3 pr-3 pt-1 pb-1" >9+</span ></i > <hr /> < /li> <li class="link avatar-link" > <div class="avatar icon" style=" background-image: url(https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260); width: 42px; height: 42px; position: relative; " >< /div> <hr /> < /li> < /ul> < /div> < /nav>


NavBar v0.0.5

Copy this snippet and paste it in your html page's body tag:

<nav class="navbar nav-iv nav-sp warning mid-animation" > <div class="nav-brand" > <p>NAVBAR</p> <ul class="social-links" style="" > <li class="link" > <i class="fab fa-twitter" >< /i> < /li> <li class="link" > <i class="fab fa-facebook-f" >< /i> < /li> <li class="link" > <i class="fab fa-instagram" >< /i> < /li> <li class="link" > <i class="fab fa-linkedin-in" >< /i> < /li> < /ul> < /div> <div class="links-container" > <ul class="links" style="" > <li class="link" > Home <hr /> < /li> <li class="link active" > About <hr /> < /li> <li class="link" > Contact <hr /> < /li> < /ul> <ul class="links" style="" > <li class="link" onclick="hamSp2ClickHandler();" > <button id="ham-icon" >≡< /button> <hr /> < /li> <li class="link" > <i class="fas fa-inbox icon" >< /i> <hr /> < /li> <li class="link active" > <i class="fas fa-bell icon" ><span class="badge badge-xsm danger top right br-3 pl-3 pr-3 pt-1 pb-1" >9+</span ></i > <hr /> < /li> <li class="link avatar-link" > <div class="avatar icon" style=" background-image: url(https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260); width: 42px; height: 42px; position: relative; " >< /div> <hr /> < /li> < /ul> < /div> < /nav>


NavBar v0.0.6

Copy this snippet and paste it in your html page's body tag:

<nav class="navbar nav-iv nav-sp light mid-animation" > <div class="nav-brand" > <p>NAVBAR</p> <ul class="social-links" style="" > <li class="link" > <i class="fab fa-twitter" >< /i> < /li> <li class="link" > <i class="fab fa-facebook-f" >< /i> < /li> <li class="link" > <i class="fab fa-instagram" >< /i> < /li> <li class="link" > <i class="fab fa-linkedin-in" >< /i> < /li> < /ul> < /div> <div class="links-container" > <ul class="links" style="" > <li class="link" > Home <hr /> < /li> <li class="link active" > About <hr /> < /li> <li class="link" > Contact <hr /> < /li> < /ul> <ul class="links" style="" > <li class="link" onclick="hamSp2ClickHandler();" > <button id="ham-icon" >≡< /button> <hr /> < /li> <li class="link" > <i class="fas fa-inbox icon" >< /i> <hr /> < /li> <li class="link active" > <i class="fas fa-bell icon" ><span class="badge badge-xsm danger top right br-3 pl-3 pr-3 pt-1 pb-1" >9+</span ></i > <hr /> < /li> <li class="link avatar-link" > <div class="avatar icon" style=" background-image: url(https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260); width: 42px; height: 42px; position: relative; " >< /div> <hr /> < /li> < /ul> < /div> < /nav>


NavBar v0.0.7

Copy this snippet and paste it in your html page's body tag:

<nav class="navbar nav-iv danger mid-animation" > <div class="nav-brand" > <p>NAVBAR</p> <button id="ham-icon" onclick="hamClickHandler();" > ≡ < /button> < /div> <div class="links-container single-ul" > <ul class="links" style="" > <li class="link" > Home <hr /> < /li> <li class="link active" > About <hr /> < /li> <li class="link" > Contact <hr /> < /li> < /ul> < /div> < /nav>


instant v0.0.1 2021