Gogies 3D Navbars

red skin (.red)

blue skin (.blue)

orange skin (.orange)

green skin (.green)

yellow skin (.yellow)

charcoal skin (.charcoal)

black skin (.black)

grey skin (.grey)

white skin (.white)

info skin (.info)

success skin (.success)

alert skin (.alert)

warning skin (.warning)

error skin (.error)

Note:
code example:

		    <nav  class="navbar blue">
 <div class="nav-toggle"></div>
 <span class="brand-small"><strong>GOGIES</strong></span>
 <ul class="nav-menu" >
   <li class="brand"><strong>GOGIES</strong></li>
   <li><a href="#">menu item 1</a>
	 <ul>
	   <li><a href="#">menu item</a></li>
	   <li><a href="#">long menu item sets sub width</a>
		  <ul>
			<li><a href="#">menu item</a></li>
			<li><a href="#">menu item</a></li>
			<li><a href="#">menu item</a></li>
			<li><a href="#">menu item</a></li>
			<li><a href="#">menu item</a></li>
		</ul>
	   </li>
	</ul>
    </li>
<li><a href="#">menu item 2</a></li>
<li><a  class="active" href="#">menu item 4</a></li>
<li class="right"><a href="#">right item </a>
		  <ul>
			<li><a href="#">menu item</a></li>
			<li><a href="#">menu item</a></li>
			<li><a href="#">menu item</a></li>
			<li><a href="#">menu item</a></li>
			<li><a href="#">menu item</a></li>
		</ul>
</li>
</ul>
</nav>

.brand: Visible only on big divices .brand-small visiable only on small devices

vertical nav

You can have vertical nav by adding the class .vertical see bellow example
<nav class="blue navbar vertical">

		    <nav  class="navbar blue">
        <div class="nav-toggle"></div>
       <span class="brand-small"><strong>GOGIES</strong></span>
        <ul class="nav-menu" >
        <li class="brand"><strong>GOGIES</strong></li>
			<li>
				<a href="#">menu item 1</a>
				<ul>
					<li>
						<a href="#">menu item</a>
					</li>
					<li>
						<a href="#">long menu item sets sub width</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>


				</ul>
			</li>
			<li>
				<a href="#">menu item 2</a>
			</li>
			<li>
				<a  class="active" href="#">menu item 4</a>
			</li>

            <li class="right"><a   href="#">right item </a>		  <ul>
            			<li ><a href="#">menu item</a></li>
			<li><a href="#">menu sub item long text </a></li>
			<li><a href="#">menu item</a></li>
			<li><a href="#">menu item</a></li>
			<li><a href="#">menu item</a></li>
		</ul></li>
        <li class="right"><div class="pad-t"><br>
<input type="text" class="h-gap-t" placeholder="Search..." ><br>
</div> <li>
		</ul></nav>