Components

Navbar

Navbars are responsive meta components that serve as navigation headers for your site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

  1. Basic code
  2. Colors
  3. Sizes
  4. Options

Basic code

You can see an example of a navbar in top of this page. Following code is the code for this navbar.


<header class="site-header">

<!-- Top navbar & branding -->
<nav class="navbar navbar-default">
<div class="container">

<!-- Toggle buttons and brand -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
<span class="glyphicon glyphicon-option-vertical"></span>
</button>

<button type="button" class="navbar-toggle for-sidebar" data-toggle="offcanvas">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a class="navbar-brand" href="index.html"><img src="wp-content/themes/HelpCenter/img/logo.png" alt="logo"></a>
</div>
<!-- END Toggle buttons and brand -->

<!-- Top navbar -->
<div id="navbar" class="navbar-collapse collapse" aria-expanded="true" role="banner">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Documentation</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">FAQ</a></li>
<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Language <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">English</a></li>
    <li><a href="#">French</a></li>
    <li><a href="#">Spanish</a></li>
    <li><a href="#">Chinese</a></li>
  </ul>
</li>
<li class="hero"><a href="#">Purchase</a></li>
</ul>
</div>
<!-- END Top navbar -->

</div>
</nav>
<!-- END Top navbar & branding -->

</header>

Colors

By default, background color of the navbar is equal to accent color. But you can simply have your light and dark navbar by adding .navbar-light or .navbar-dark to the .navbar.

default

Default

It’s default color, doesn’t require any class.

light

Light

Uses .navbar-light class.

dark

Dark

Uses .navbar-dark class.

Example


<header class="site-header">

<!-- Top navbar & branding -->
<nav class="navbar navbar-default navbar-dark">
...
</nav>
<!-- END Top navbar & branding -->

</header>

Sizes

Easily change the height size of your navbar by adding .navbar-sm or .navbar-lg to the .site-header. Even you can make it fullwidth by adding .navbar-fullwidth to the .site-header.

small

Small

Uses .navbar-sm class.

default

Default

It’s default size, doesn’t require any class.


large

Large

Uses .navbar-lg class.

fullwidth

Fullwidth

Uses .navbar-fullwidth class.

Example


<header class="site-header navbar-sm">

<!-- Top navbar & branding -->
<nav class="navbar navbar-default">
...
</nav>
<!-- END Top navbar & branding -->

</header>

Options

Still you have more options to customize your navbar for yourself.

Sticky navbar

By adding .sticky class to the .site-header you can fix your navbar on top of the page.


<header class="site-header">

<!-- Top navbar & branding -->
<nav class="navbar navbar-default">
...
</nav>
<!-- END Top navbar & branding -->

</header>

Transparent navbar

By adding .navbar-transparent class to the .site-header you can remove background color of the navbar. It’s a good practice to have transparent navbar when you included a banner to your page; like the following image.

index


<header class="site-header navbar-transparent">

<!-- Top navbar & branding -->
<nav class="navbar navbar-default">
...
</nav>
<!-- END Top navbar & branding -->

</header>

Banner

Banner is a combination of an image, some heading text, paragraphs, buttons, etc. which comes to header of your page and gives your readers an important message and make your page more fancier.

  1. Basic usage
  2. Sizes
  3. Variations

Basic usage

You can see an example of a banner in top of this page. Following code is the code for this banner.


<header class="site-header navbar-transparent navbar-fullwidth">

<!-- Top navbar & branding -->
<nav class="navbar navbar-default">
...
</nav>
<!-- END Top navbar & branding -->

<!-- Banner -->
<div class="banner overlay-black" style="background-image: url(wp-content/themes/HelpCenter/img/banner1.jpg);">
<div class="container text-center">
<h1>Online Documentation Template</h1>
<h5><strong>theDocs</strong> reduce the burden of developing documentation for your next product.</h5>
<br><br><br>
<p><a class="btn btn-white btn-lg btn-outline" href="#" role="button"> Getting Started </a></p>
</div>
</div>
<!-- END Banner -->

</header>

Sizes

Easily change the height of your banner by adding .banner-sm or .banner-lg to the .banner. Even you can make it full height by adding .navbar-full-height to the .banner.

small

Small

Uses .banner-sm class.

default

Default

It’s default size, doesn’t require any class.


large

Large

Uses .banner-lg class.

fullwidth

Full height

Uses .banner-full-height class.

Variations

Apart from size varieties, you can make different type of variations.

sample1

Sample 1

Demo

sample2

Sample 2

Demo

sample3

Sample 3

Demo

Sidebar

A necessary component for your documentation template. Categorize your pages in different categories and let your readers to easily navigate between the pages.

You can find an example of a sidebar in left side of this page. A sample code is as follow.


<aside class="col-md-3 sidebar">

<ul class="sidenav">
<li>
<a href="#">Getting started</a>
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">How to install</a></li>
<li><a href="#">Configuration</a></li>
<li><a href="#">Next step</a></li>
</ul>
</li>

<li>
Components
<ul>
<li><a href="#">Code</a></li>
<li><a href="#">Promo</a></li>
<li><a href="#">Steps</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>

<li>
<a href="#"><span class="fa fa-css3"></span>CSS</a>
<ul>
<li><a href="#"><span class="fa fa-font"></span> Typography</a></li>
<li><a href="#"><span class="fa fa-tag"></span> Label</a></li>
<li><a href="#"><span class="fa fa-square-o"></span> Button</a></li>
</ul>
</li>
</ul>

</aside>

Variations

Checkout other examples of sidebar component. You should add your desire class to the .sidebar tag.

default

Default

It’s default sidebar type, doesn’t require any class.

line

Line

Uses .sidebar-line class.

Demo

icon

Icon

Uses .sidebar-icon class.

Demo

Footer

Provide some generic information such as your copyright and some links in bottom of every page.

You can find an example of a footer in bottom of this page. A sample code is as follow. It’s the simpleset component of your page!


<!-- Footer -->
<footer class="site-footer">
<div class="container">
<a id="scroll-up" href="#"><i class="fa fa-angle-up"></i></a>

<div class="row">
<div class="col-md-6 col-sm-6">
<p>theDocs &copy; 2015. Created by <a href="#">ShaMSofT</a></p>
</div>
<div class="col-md-6 col-sm-6">
<ul class="footer-menu">
<li><a href="#">About</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- END Footer -->