vBSocial 10 Guide

How to add a link to your new navbar:

Find the livenotifications template:

 <ul class="nav navbar-nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul>

Note: All items will be displayed in the mainbar even on small devices

How to add an icon like the “house” to your  navbar in each link:

<ul class="nav navbar-nav navbar-left"> <!-- Left side navigation--> <li class="active"><a href="#"><i class="fa fa-home"></i> Home</a></li> </ul>

vBSocial 10 uses Font Awesome. Similarly, any of the icons can be changed out simply by changing the red word above, to one  from the Font Awesome list.

 How to add a link to the right side:

<ul class="nav navbar-nav navbar-right"> <!-- Right side navigation--> <li><a href="#">Link 3</a></li> </ul>

How to add text to the navbar:

<p class="navbar-text navbar-left">Text on the left side</p>

How to add a form:

Place form content within .navbar-form for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.

<form class="navbar-form navbar-right" role="search"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-warning" type="button"><i class="fa fa-search"></i> Search</button> </span> </div> </form>

How to add a button:

2015-06-30_15-00-21

 

 

<li class="divider"></li> <li style="padding:0 15px;"> <button type="button" class="btn btn-primary btn-block navbar-btn">Primary</button> </li>

<li class="divider"></li> <li style="padding:0 15px;"> <button type="button" class="btn btn-success btn-block navbar-btn">Success</button> </li>

<li class="divider"></li> <li style="padding:0 15px;"> <button type="button" class="btn btn-default btn-block navbar-btn">Default</button> </li>

<li class="divider"></li>

Leave a Reply