Berg HTML documentation

Navigation desktop & mobile version

To create the most flexible navigation bar we used different markup for desktop and mobile version. It supports nested lists and is fully responsive.

Basic navigation

In our package, you find 2 navigations (main navigation and mobile navigation). Main navigation (id: main-navbar) is default at the top of page but if you want to change position (center) in home page, add class to the body "nav-center". Example the central navigation you can see in home page with parallax ( index5.html ). You can also choose a variant, the close navigation or the navigation with only visible logo and button reorder. If you want to have open navigation, add class to body "show-nav". All classes used in our template find below.

Navigation classes

Remember all navigation classes add to the body.

show-nav

open navigation (default: close)

nav-transparent

navigation with background transparent ( default: background color)

nav-center

navigation ath the center of screen

		Main navigation
		

To insert a logo to the navbar you need to add your link images. We suggest to add light logo (class: "light-logo") and dark logo (class: "dark-logo").

		<div class="logo pull-left">	
		  <a href="index.html">	
			<figure>	
			  <img src="img/logo1.png" class="light-logo" alt="Berg HTML Theme"/>	
			   <img src="img/logo2.png" class="dark-logo" alt="Berg HTML Theme"/>	
			</figure>	
		  </a>	
		</div>	
		

Mobile navigation

Mobile version of navbar authomatically redirect to resolution smaller than 992px. Navigation was changed to easy usage specially for mobile device so it contains navbar with logo and flyout container.

To add own variables to list mobile navbar you edit part of markup in all files. When placed some elements in the content remember to use some of our pre-defined classes and markup snippets in order to obtain the best possible look.

		<div id="mobile-nav" class="visible-xs visible-sm">
			<header>
				<div class="container-fluid">
					<ul class="menu-header">
						<li class="pull-left">
							<a href="index.html" class="logo">
								<figure>
									<img src="img/logo2.png" alt="Berg HTML Theme"/>
								</figure>
							</a>
						</li>
						<li class="reorder pull-right"><a href="#" title=""><i class="fa fa-bars"></i></a></li>
					</ul>
				</div>
			</header>	
			<div class="" id="flyout-container">
				<ul id="mobile-navbar" class="nav flyout-menu main-nav nav-height">
					<li class="nav-item">
						<a title="" href="">home</a>
						<span class="open-children"><i class="fa fa-angle-down"></i></span>
						<ul class="subnav">
							<li><a href="index.html" title=""><span>parallax</span></a></li>
							<li><a href="index2.html" title=""><span>fullscreen slider</span></a></li>
							<li><a href="index3.html"><span>video background</span></a></li>
							<li><a href="index4.html" title=""><span>static background</span></a></li>
						</ul>
					</li>
		

How to change icons? Check it here.

Style variables

All variables are defined in less/custom.less file. Read more how to edit and compile LESS files.