Using sb admin panel 2 in my application. I want to make second level menu in side menu, but when i do that, second level menu is always open. I want when I click first level menu then second menu appear. Not able to understand where is the problem.
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i>Sudent <span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Student
</li>
<li>
Subject
</li>
</ul>
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i>Routine <span class="fa arrow"></span>
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
this code is present in my page header and added all js in my footer
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="../bower_components/raphael/raphael-min.js"></script>
<script src="../bower_components/morrisjs/morris.min.js"></script>
<script src="../js/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
Add collapse class to your second level
<ul class="nav nav-second-level collapse">
P.S
it looks like you are using SBAdmin V2 and not V1, should specify that.
Also, i would suggest to try copy/paste from their demo pages and modifying it to your likings.
SBAdminV2 Live Preview
SBAdminV2 Github page (Source, Documentation, and HELP! :) )
SBAdminV1 Live Preview
EDIT
Seems to work fine with their exact code.
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css" rel="stylesheet">
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/morrisjs/morris.css" rel="stylesheet">
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<!-- /.navbar-header -->
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav in" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
Flot Charts
</li>
<li>
Morris.js Charts
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-table fa-fw"></i> Tables
</li>
<li>
<i class="fa fa-edit fa-fw"></i> Forms
</li>
<li>
<i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
Panels and Wells
</li>
<li>
Buttons
</li>
<li>
Notifications
</li>
<li>
Typography
</li>
<li>
Icons
</li>
<li>
Grid
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
Second Level Item
</li>
<li>
Second Level Item
</li>
<li>
Third Level <span class="fa arrow"></span>
<ul class="nav nav-third-level collapse">
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
Blank Page
</li>
<li>
Login Page
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- /#page-wrapper -->
</div>
<script src="//blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<script src="//blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="//blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.js"></script>
<script src="//blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"></script>
</body>
Related
I am using Bootstrap 3 to make left vertical menu. Here is a small part of my navbar code...
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Address Book<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
People List
</li>
<li>
New Person
</li>
</ul>
</li>
</ul>
</div>
</div>
The above results in a menu lie this:
If I click on a menu item, sub menu items will appear, however, if the list is too long it is cut short and there is no way to scroll. How do I fix this?
hi i'm working on a admin template. I converted the html codes into mvc structure. Now i am stuck , when i create a page using the layout in the shared folder the footer goes up to the navigation bar. for more understanding check the screenshot
here is my _layoutadmin.cshtml
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<i class="fa fa-paw"></i> <span>Admin Panel</span>
</div>
<div class="clearfix"></div>
<!-- menu prile quick info -->
<div class="profile">
<div class="profile_pic">
<img src="~/Content/admin/AdminLogo.jpg" alt="..." class="img-circle profile_img"/>
#*<img src="images/img.jpg" alt="..." class="img-circle profile_img">*#
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>John Doe</h2>
</div>
</div>
<!-- /menu prile quick info -->
<br />
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li>
<a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>
Dashboard
</li>
<li>
Dashboard2
</li>
<li>
Dashboard3
</li>
</ul>
</li>
<li>
<a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>
General Form
</li>
<li>
Advanced Components
</li>
<li>
Form Validation
</li>
<li>
Form Wizard
</li>
<li>
Form Upload
</li>
<li>
Form Buttons
</li>
</ul>
</li>
<li>
<a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>
General Elements
</li>
<li>
Media Gallery
</li>
<li>
Typography
</li>
<li>
Icons
</li>
<li>
Glyphicons
</li>
<li>
Widgets
</li>
<li>
Invoice
</li>
<li>
Inbox
</li>
<li>
Calender
</li>
</ul>
</li>
<li>
<a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>
Tables
</li>
<li>
Table Dynamic
</li>
</ul>
</li>
<li>
<a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>
Chart JS
</li>
<li>
Chart JS2
</li>
<li>
Moris JS
</li>
<li>
ECharts
</li>
<li>
Other Charts
</li>
</ul>
</li>
</ul>
</div>
<div class="menu_section">
<h3>Live On</h3>
<ul class="nav side-menu">
<li>
<a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>
E-commerce
</li>
<li>
Projects
</li>
<li>
Project Detail
</li>
<li>
Contacts
</li>
<li>
Profile
</li>
</ul>
</li>
<li>
<a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>
404 Error
</li>
<li>
500 Error
</li>
<li>
Plain Page
</li>
<li>
Login Page
</li>
<li>
Pricing Tables
</li>
</ul>
</li>
<li>
<a><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a>
</li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<nav class="" role="navigation">
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img src="images/img.jpg" alt="">John Doe
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-usermenu animated fadeInDown pull-right">
<li>
Profile
</li>
<li>
<a href="javascript:;">
<span class="badge bg-red pull-right">50%</span>
<span>Settings</span>
</a>
</li>
<li>
Help
</li>
<li>
<i class="fa fa-sign-out pull-right"></i> Log Out
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main">
<!-- top tiles -->
#RenderBody()
<!-- footer content -->
<footer>
<div class="copyright-info">
<p class="pull-right">
Gentelella - Bootstrap Admin Template by Colorlib
</p>
</div>
<div class="clearfix"></div>
</footer>
<!-- /footer content -->
</div>
<!-- /page content -->
</div>
</div>
<div id="custom_notifications" class="custom-notifications dsp_none">
<ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group"></ul>
<div class="clearfix"></div>
<div id="notif-group" class="tabbed_notifications"></div>
</div>
Using <footer> tag in HTML does not create a sticky bottom footer.
Have a look to this Bootstrap example
I'm working on the navbar for a site and for the menu it has an unordered list with submenus that are actived when the menu item is hovered over, but when you remove your mouse from the menu item to attempt to click on a submenu item the submenu dissapears. Is there a way with CSS/HTML to hover over it, then have the user click on it to keep it activated? If that's not possible, is it possible to change it to stay activated on a click without the preview on the hover?
HTML:
<!-- Navbar -->
<div class="header">
<div class="topbar">
<ul class="list-inline">
<li class="smallsocial"> </li><li> </li>
<li class="smallsocial"> <a href="https://www.facebook.com/prayingpelicanmissions" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://plus.google.com/+PrayingpelicanmissionsOrg" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Google Plus">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://www.youtube.com/user/petepelican?sub_confirmation=1" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Youtube">
<i class="fa fa-youtube"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://twitter.com/PrayingPelican" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://www.instagram.com/prayingpelicanmissions/" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Instagram">
<i class="fa fa-instagram"></i>
</a></li><li> </li>
<li class="pull-right"><button class="btn btn-dark">CONTACT US</button></li>
<li class="pull-right"><button class="btn btn-dark">LOGIN</button></li>
</ul>
</div>
<!-- End Social Links -->
<div class="navbar mega-menu" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Navbar Brand -->
<div class="navbar-brand">
<a href="index.html">
<img class="default-logo" src="assets/img/whitelogo.png" alt="Logo">
<img class="shrink-logo" src="assets/img/blacklogo.png" alt="Logo">
</a>
</div>
<!-- ENd Navbar Brand -->
<!-- Header Inner Right -->
<!-- End Header Inner Right -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<div class="menu-container">
<ul class="nav navbar-nav">
<!-- Home -->
<li class="dropdown">
<a href="javascript:void(0);" class="pull-right dropdown-toggle" data-toggle="dropdown">
About Us
</a>
<ul class="dropdown-menu">
<li>Who We Are</li>
<li>Partners</li>
<li>Trip Media</li>
<li>Trip Journals</li>
<li role="separator" class="divider"></li>
<li> Donate</li>
</ul>
<!-- End Home -->
<!-- Shortcodes -->
<li class="dropdown mega-menu-fullwidth">
<a href="javascript:void(0);" class="pull-right dropdown-toggle" data-toggle="dropdown">
Locations
</a>
<ul class="dropdown-menu">
<li>
<div class="mega-menu-content disable-icons">
<div class="container">
<div class="row equal-height">
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>United States</h3></li>
<!-- Typography -->
<li class="location"><i></i> Tucson, AZ</li>
<li class="location"><i></i>San Francisco, CA</li>
<li class="location"><i></i> Miami, FL</li>
<li class="location"><i></i> Chicago, IL</li>
<li class="location"><i></i> Boston, MA</li>
<li class="location"><i></i>Minneapolis, MN</li>
<li class="location"><i></i> Pittsburg, PA</li>
<li class="location"><i></i> Providence, RI</li>
<li class="location"><i></i> Memphis, TN</li>
<li class="location"><i></i>US Reservations</li>
<!-- End Typography -->
</ul>
</div>
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>CENTRAL AMERICA</h3></li>
<!-- Buttons -->
<li class="location"><i></i>Belize</li>
<li class="location"><i></i>Costa Rica</li>
<li class="location"><i></i>Guatemala</li>
<li class="location"><i></i>Mexico</li>
<li class="location"><i></i>Nicaragua</li>
<!-- End Buttons -->
</ul>
</div>
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>CARIBBEAN</h3></li>
<!-- Buttons -->
<li class="location"><i></i>Bahamas</li>
<li class="location"><i></i>Cuba</li>
<li class="location"><i></i>Dominican Republic</li>
<li class="location"><i></i>Haiti</li>
<li class="location"><i></i>Jamaica</li>
<li class="location"><i></i>Puerto Rico</li>
<!-- End Buttons -->
</ul>
</div>
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>AFRICA/EUROPE</h3></li>
<!-- Buttons -->
<li class="location"><i></i>Italy</li>
<li class="location"><i></i>Ghana</li>
<li class="location"><i></i>South Africa</li>
<!-- End Buttons -->
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<!-- End Shortcodes -->
<!-- Demo Pages -->
<li class="">
<a href="http://www.prayingpelicanmissions.org/journals">
Trip Journals
</a>
</li>
<li class=".button12">
<a href="http://www.prayingpelicanmissions.org/mission-trip-registration">
<button type="button" class="btn btn-default">REGISTER FOR A TRIP</button>
</a>
</li>
<div class="header-inner-right">
<li class="menu-icons">
<i class="menu-icons-style search search-close search-btn fa fa-search"></i>
<div class="search-open">
<input type="text" class="animated fadeIn form-control" placeholder="Start searching ...">
</div>
<!-- End Demo Pages -->
</ul>
<!--/navbar-collapse-->
</div>
</div>
</div>
</div>
</div> <!-- End Navbar -->
There might be a small gap between the menu and submenu. Take a look here.
Ideally some code would help, but sounds like a nested dropdown would be more accurate, also I assume you are using Bootstrap 3?
Check this example Multi level dropdown menu BS3
I have a left sidebar and a main menu.....i need to keep the left sidebar fixed while scrolling down the page....but am not getting it.
This is my code.
Can anyone help me how to do it?
<div class="nav-wrapper">
<!-- START Left navbar-->
<ul class="nav navbar-nav">
<li>
<!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
<a href="" data-toggle-state="aside-collapsed" class="hidden-xs">
<em class="fa fa-navicon"></em>
</a>
<!-- Button to show/hide the sidebar on mobile. Visible on mobile only.-->
<a href="" data-toggle-state="aside-toggled" data-no-persist="true" class="visible-xs sidebar-toggle">
<em class="fa fa-navicon"></em>
</a>
</li>
</ul>
<!-- END Left navbar-->
<!-- START Right Navbar-->
<ul class="nav navbar-nav navbar-right">
<!-- <li>
<a href="" data-search-open="">
<em class="icon-magnifier"></em>
</a>
</li> -->
<!-- Fullscreen (only desktops)-->
<!-- <li class="visible-lg">
<a href="" data-toggle-fullscreen="">
<em class="fa fa-expand"></em>
</a>
</li> -->
<li class="dropdown user">
<!-- <span style="color: #ddd;"></span> -->
<a title="Log Out" style="text-decoration: none; box-shadow:0px 0px 0px; cursor: pointer;" class="dropdown-toggle"
data-toggle="dropdown" data-hover="dropdown"
data-close-others="true">
{{loggedInUser.userFirstName}} {{loggedInUser.userLastName}} <i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li><i class="fa fa-sign-out"></i> Log Out</li>
</ul>
</li>
</ul>
</div>
Use position:fixed;overflow:auto; on the left one. You may need to adjust the position of the right one. Use position:relative; on the right panel.
I'm working on Foundation Zurb template and I'm trying to get it working.
I have Top Bar at the top of the screen (full width), Icon Bar at the left side (full height). I know that Foundation has 12 grid system.
According to Foundation:
The Foundation Top Bar gives you a great way to display a complex
navigation bar on small, medium or large screens.
And:
An Icon Bar provides a menu to quickly navigate an app. Use the Icon
Bar horizontally or vertically, with the labels below the icons or to
the right. Have it your way.
Here is my template. I've took out div.large-9.columns etc.. Because they were braking the view.
<!-- Navigation -->
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>LOGO PLACEHOLDER</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><i class="fa fa-diamond"></i> Go PRO</li>
<li class="has-dropdown">
<i class="fa fa-user"></i> My Account
<ul class="dropdown">
<li>Some Li's here</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><i class="fa fa-database"></i> ONE</li>
<li><i class="fa fa-list-ol"></i> TWO</li>
<li><i class="fa fa-users"></i> THREE</li>
</ul>
</section>
</nav>
<!-- Left Nav Sidebar -->
<div class="icon-bar vertical five-up">
<a class="item">
<i class="fa fa-home"></i>
<label>Home</label>
</a>
<a class="item">
<i class="fa fa-gamepad"></i>
<label>ONE</label>
</a>
<a class="item">
<i class="fa fa-star"></i>
<label>TWO</label>
</a>
<a class="item">
<i class="fa fa-thumbs-up"></i>
<label>THREE</label>
</a>
<a class="item">
<i class="fa fa-trophy"></i>
<label>FOUR</label>
</a>
</div>
I want to achieve:
Top Bar and Icon Bar the same
Content Area to be fixed and have large-8 or large-9
Sidebar to be fixed and have large-3
What I've already tried:
Was separating all 3 bits with div.large-1/8/3, nothing happened
Was nesting them into div.row
I think I've tried almost everything, but have no idea, what is the problem.
i had done the changes in html and css. this what your expecting
html code
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>LOGO PLACEHOLDER</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><i class="fa fa-diamond"></i> Go PRO</li>
<li class="has-dropdown">
<i class="fa fa-user"></i> My Account
<ul class="dropdown">
<li>Some Li's here</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><i class="fa fa-database"></i> ONE</li>
<li><i class="fa fa-list-ol"></i> TWO</li>
<li><i class="fa fa-users"></i> THREE</li>
</ul>
</section>
</nav>
<!-- Left Nav Sidebar -->
<div class="medium-1 columns left-nav">
<div class="icon-bar vertical five-up">
<a class="item">
<i class="fa fa-home"></i>
<label>Home</label>
</a>
<a class="item">
<i class="fa fa-gamepad"></i>
<label>ONE</label>
</a>
<a class="item">
<i class="fa fa-star"></i>
<label>TWO</label>
</a>
<a class="item">
<i class="fa fa-thumbs-up"></i>
<label>THREE</label>
</a>
<a class="item">
<i class="fa fa-trophy"></i>
<label>FOUR</label>
</a>
</div>
</div>
<div class="medium-8 columns content-area">content-area</div>
<div class="medium-3 columns sidebar">columns sidebar</div>
css code
.columns.content-area{border:1px solid #111;padding:0}
.columns.sidebar{border:1px solid #111;padding:0}
.columns.left-nav{padding:0}
.icon-bar.vertical.five-up{width:100%}
demo jsFiddle