Can't set headings for every column in dropdown menu - html

I have a dropdown menu in a template that I got online. Here is the code for the dropdown menu:
<!-- mega-menu start -->
<li class="dropdown mega-menu">
Clients
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-lg-8 col-md-9">
<h4>Customers</h4>
<div class="row">
<div class="col-sm-4">
<div class="divider"></div>
<ul class="menu">
<li><i class="icon-right-open"></i>About Us</li>
<li><i class="icon-right-open"></i>About Us 2</li>
<li><i class="icon-right-open"></i>About Us 3</li>
<li><i class="icon-right-open"></i>About Me</li>
<li><i class="icon-right-open"></i>Our Team - Options</li>
<li><i class="icon-right-open"></i>Services</li>
</ul>
</div>
<div class="col-sm-4">
<div class="divider"></div>
<ul class="menu">
<li><i class="icon-right-open"></i>Contact</li>
<li><i class="icon-right-open"></i>Contact 2</li>
<li><i class="icon-right-open"></i>Coming Soon Page</li>
<li><i class="icon-right-open"></i>404 error</li>
<li><i class="icon-right-open"></i>FAQ page</li>
<li><i class="icon-right-open"></i>Sidebar - Affix Menu</li>
</ul>
</div>
<div class="col-sm-4">
<div class="divider"></div>
<ul class="menu">
<li><i class="icon-right-open"></i>Left Sidebar</li>
<li><i class="icon-right-open"></i>Right Sidebar</li>
<li><i class="icon-right-open"></i>Two Sidebars</li>
<li><i class="icon-right-open"></i>No Sidebars</li>
<li><i class="icon-right-open"></i>Sitemap</li>
<li><i class="icon-right-open"></i>Invoice <span class="badge">v1.1</span></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
The clients dropdown menu has three columns. The first column has the heading customers. How do I give a heading to the second and third columns? Every time I try to do that, it messes up the layout of the dropdown.


Try this:
<li class="dropdown mega-menu">
Clients
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-lg-8 col-md-9">
<div class="row">
<div class="col-sm-4">
<h4>Customers</h4>
<div class="divider"></div>
<ul class="menu">
<li><i class="icon-right-open"></i>About Us</li>
<li><i class="icon-right-open"></i>About Us 2</li>
<li><i class="icon-right-open"></i>About Us 3</li>
<li><i class="icon-right-open"></i>About Me</li>
<li><i class="icon-right-open"></i>Our Team - Options</li>
<li><i class="icon-right-open"></i>Services</li>
</ul>
</div>
<div class="col-sm-4">
<h4>Clients</h4>
<div class="divider"></div>
<ul class="menu">
<li><i class="icon-right-open"></i>Contact</li>
<li><i class="icon-right-open"></i>Contact 2</li>
<li><i class="icon-right-open"></i>Coming Soon Page</li>
<li><i class="icon-right-open"></i>404 error</li>
<li><i class="icon-right-open"></i>FAQ page</li>
<li><i class="icon-right-open"></i>Sidebar - Affix Menu</li>
</ul>
</div>
<div class="col-sm-4">
<h4>Users</h4>
<div class="divider"></div>
<ul class="menu">
<li><i class="icon-right-open"></i>Left Sidebar</li>
<li><i class="icon-right-open"></i>Right Sidebar</li>
<li><i class="icon-right-open"></i>Two Sidebars</li>
<li><i class="icon-right-open"></i>No Sidebars</li>
<li><i class="icon-right-open"></i>Sitemap</li>
<li><i class="icon-right-open"></i>Invoice <span class="badge">v1.1</span></li>
</ul>
</div>
</div>
</div>
</div>
</li>

Related

bootrstrap side menu three levels collapsing

I'm using SB Admin bootstrap theme and I have problems with collapsing left side menu correctly.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav nav-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-cog fa-fw"></i> Top level 1 (this one collapses correctly)<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li> Second level 1</li>
<li> Second level 2</li>
</ul>
</li>
<li>
<i class="fa fa-cog fa-fw"></i> Top level 2 (This one stays open)<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
<i class="fa fa-plus fa-fw"></i> Second level 1<span class="fa arrow"></span>
<ul class="nav nav-third-level collapse">
<li>Third level 1</li>
<li>Third level 2</li>
</ul>
</li>
<li>
<i class="fa fa-plus fa-fw"></i> Second level 2<span class="fa arrow"></span>
<ul class="nav nav-third-level collapse">
<li>Third level 1</li>
<li>Third level 2</li>
</ul>
</li>
</ul>
</li>
<li>
<i class="fa fa-cog fa-fw"></i> Top level 3 (this one stays open)<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
<i class="fa fa-plus fa-fw"></i> Second level 1<span class="fa arrow"></span>
<ul class="nav nav-third-level collapse">
<li>Third level 1</li>
<li>Third level 2</li>
</ul>
</li>
<li>
<i class="fa fa-plus fa-fw"></i> Second level 2<span class="fa arrow"></span>
<ul class="nav nav-third-level collapse">
<li>Third level 1</li>
<li>Third level 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
What I want to acheive is when I first load page the menu should be collapsed. When I select a subitem I want the menu to load collapsed and then open to the correct item. Currently Top menu item with 1 sublevel collapses correctly. The second and third top level first collapse (which is ok) but then open (should stay closed unless a subitem is selected). Third level works ok. What is the correct combination of bootstrap collapse classes to acheive the correct function?

Bootstrap dropdowns menus appearing behind other DIV's

I'm using Bootstrap v3.3.6
So I'm using their 'dropdown-menu' on my 'top-box' div to display submenu.
But for some reason 'dropdown-menu' are appearing behind the 'header-brand' DIV on my site.
I added z-index to my CSS, but still doesn't seem to do anything, Please help.
Here is My Project URL: Click Here
<header id="header">
<!-- BEGIN TOP BAR -->
<div class="top-box animatedq fadeInDownq">
<div class="left-bar">
<ul class="list-inline top-contact-info">
<li><i class="fa fa-mobile-phone"></i> 24X7 Contact : +91 9830556230</li>
</ul>
</div>
<div class="right-bar">
<ul class="list-inline top-menu-items" role="navigation">
<li><i class="fa fa-briefcase"></i> Create Wallet</li>
<li><i class="fa fa-sign-in"></i> User Login</li>
<li><i class="fa fa-sign-in"></i> Agent Login</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu submenu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- END TOP BAR -->
<!-- BEGIN BRAND(COMPANY NAME & LOGO) -->
<div class="header-brand">
<div class="logo">
<img src="assets/images/logo.png" alt="Logo">
</div>
<div class="social-icons">
<ul class="icons">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-skype"></i></li>
<li><i class="fa fa-vimeo"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
<!-- END BRAND(COMPANY NAME & LOGO) -->
</header>
CSS Code
.top-box .submenu {
z-index: 9999999999 !important;
border-radius: 0px;
}

As mentioned, remove overflow:hidden from .top-box to stop clipping the content and add the class clearfix to clear the floats of the inner divs.
<div class="top-box animatedq fadeInDownq clearfix">

BucketAdmin Sidebar not working

I am working on the BucketAdmin template by Theme Bucket.
Everything works smooth but when I edit the Side-bar code, it stops collapsing and opening. Here is the original code.
I am a newbie at this so please also explain the issue.
<aside>
<div id="sidebar" class="nav-collapse">
<!-- sidebar menu start-->
<div class="leftside-navigation">
<ul class="sidebar-menu" id="nav-accordion">
<li>
<a href="index.html">
<i class="fa fa-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-laptop"></i>
<span>Layouts</span>
</a>
<ul class="sub">
<li>Boxed Page</li>
<li>Horizontal Menu</li>
<li>Language Switch Bar</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-book"></i>
<span>UI Elements</span>
</a>
<ul class="sub">
<li>General</li>
<li>Buttons</li>
<li>Typography</li>
<li>Widget</li>
<li>Slider</li>
<li>Tree View</li>
<li>Nestable</li>
<li>Grids</li>
<li>Calender</li>
<li>Draggable Portlet</li>
</ul>
</li>
<li>
<a href="fontawesome.html">
<i class="fa fa-bullhorn"></i>
<span>Fontawesome </span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-th"></i>
<span>Data Tables</span>
</a>
<ul class="sub">
<li>Basic Table</li>
<li>Responsive Table</li>
<li>Dynamic Table</li>
<li>Editable Table</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-tasks"></i>
<span>Form Components</span>
</a>
<ul class="sub">
<li>Form Elements</li>
<li>Advanced Components</li>
<li>Form Wizard</li>
<li>Form Validation</li>
<li>Muliple File Upload</li>
<li>Dropzone</li>
<li>Inline Editor</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-envelope"></i>
<span>Mail </span>
</a>
<ul class="sub">
<li>Inbox</li>
<li>Compose Mail</li>
<li>View Mail</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class=" fa fa-bar-chart-o"></i>
<span>Charts</span>
</a>
<ul class="sub">
<li>Morris</li>
<li>Chartjs</li>
<li>Flot Charts</li>
<li>C3 Chart</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class=" fa fa-bar-chart-o"></i>
<span>Maps</span>
</a>
<ul class="sub">
<li>Google Map</li>
<li>Vector Map</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;" class="active">
<i class="fa fa-glass"></i>
<span>Extra</span>
</a>
<ul class="sub">
<li class="active">Blank Page</li>
<li>Lock Screen</li>
<li>Profile</li>
<li>Invoice</li>
<li>Pricing Table</li>
<li>Timeline</li>
<li>
Media Gallery
</li>
<li>404 Error
</li>
<li>500 Error</li>
<li>Registration</li>
<li>Blank2</li>
</ul>
</li>
<li>
<a href="login.html">
<i class="fa fa-user"></i>
<span>Login Page</span>
</a>
</li>
</ul>
</div>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end-->
Here is the edited code
<aside>
<div id="sidebar" class="nav-collapse">
<!-- sidebar menu start-->
<div class="leftside-navigation">
<ul class="sidebar-menu" id="nav-accordion">
<li> <i class="fa fa-dashboard"></i> <span>Dashboard</span> </li>
</ul>
</div>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end-->

Don't delete, I simply commented the part which I wanted to remove and it worked.

Foundation - Top Bar and Icon Bar in one template

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

How to customize bootstrap sidebar/sidenav?

I need to make use of Twitter Bootstrap Sidebar for creating a menu in my web application.(Highlighted in red).
To create a menu as shown below.
The top item has a dropdown as shown in mage. And Next items in menu should come below this.But this is what I get when I use the css.
Menu Item overlaping the other.
Here is the bootstrap code:
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav affix">
<li class="active"><i class="icon-chevron-right"></i> Dropdowns</li>
<li class=""><i class="icon-chevron-right"></i> Button groups</li>
<li><i class="icon-chevron-right"></i> Button dropdowns</li>
<li><i class="icon-chevron-right"></i> Navs</li>
<li><i class="icon-chevron-right"></i> Navbar</li>
<li><i class="icon-chevron-right"></i> Breadcrumbs</li>
<li><i class="icon-chevron-right"></i> Pagination</li>
<li><i class="icon-chevron-right"></i> Labels and badges</li>
<li><i class="icon-chevron-right"></i> Typography</li>
<li><i class="icon-chevron-right"></i> Thumbnails</li>
<li><i class="icon-chevron-right"></i> Alerts</li>
<li><i class="icon-chevron-right"></i> Progress bars</li>
<li><i class="icon-chevron-right"></i> Media object</li>
<li><i class="icon-chevron-right"></i> Misc</li>
</ul>
</div>
Here is my code:
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav affix">
<li> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i>dany
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a id="logout" href="#">Sign Out</a></li>
</ul>
</li>
</ul>
</div>
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav `affix`">
<li></i>Approval Requests</li>
<li></i>Settings</li>
</ul>
</div>
The css class in bootstrap setting the position is bs-docs-sidenav and affix I belive.
The css of docs.css of twitter bootstrap is this
Anyone please help to solve this issue as soon as possible.

You are using span3 on both of your menus. That means the second menu will be placed on the next grid on the right, not below the first menu.
I believe you should start like this-
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav affix">
<li> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i>dany
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a id="logout" href="#">Sign Out</a></li>
</ul>
</li>
</ul>
<ul class="nav nav-list bs-docs-sidenav affix">
<li></i>Approval Requests</li>
<li></i>Settings</li>
</ul>
</div>
Now apply some CSS on the second menu e.g.
<ul class="nav nav-list bs-docs-sidenav affix" style="top: 200px;">

You have created two div of span3 bs-docs-sidebar and hence you are seeing sidebars in parallel. If you want menu 'dany' fixed on the top, then its better to put them on top bar using <div class="navbar navbar-inverse navbar-fixed-top">