I create a very simple dropdown with sub level items in bootstrap 3 as below.
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
File
<ul class="dropdown-menu">
<li>Company</li>
<li class="dropdown">
Utilities<span class="pull-right">ยป</span>
<ul class="dropdown-menu">
<li>Item1</li>
<li>Item2</li>
</ul>
</li>
<li>Services</li>
</ul>
</li>
</ul>
</div>
I already include bootstrap.css, jquery.js adn bootstrap.js already. For the first level it works fine, but the second level does not work. I don't know why.
Bootstrap 3.x doesn't support dropdown submenus. You can achieve it by adding more css styles.
Follow this link https://stackoverflow.com/a/18024991/5488620
It may help you.
Related
As mentioned in the title, for some reason, particular menu items that have active class do not have active-trail class and so do their parents.
Example menu tree when I am currently at page Test2:
<ul class="menu">
<li class="first expanded">
Test
<ul class="menu">
<li class="first expanded">
Test2
</li>
</ul>
</li>
</ul>
This is how should it be when I am currently at page Test2:
<ul class="menu">
<li class="first expanded active-trail">
Test
<ul class="menu">
<li class="first expanded active-trail">
Test2
</li>
</ul>
</li>
</ul>
Any help is appreciated.
It's more likely that your theme (or a module) is overriding the output using one of these hooks and changing the classes:
theme_menu_link
theme_menu_tree
template_preprocess_menu_tree
I'd recommend starting with checking out the active theme's code.
Or you can just implement theme_menu_link() in your theme and override the classes to your liking.
I am trying to do a master page for my web page. I'm using HTML5 and Bootstrap framework. On the top of page there will be a bar that contains a dropdown menu and I would like to align this dropdown menu to the right.
<div class="navbar-collapse collapse" id="navbar-mobile">
<ul class="nav navbar-nav" style="">
<li class="dropdown">
Departments<span class="caret"></span>
<ul class="dropdown-menu width-200">
<li class="dropdown-submenu">
<li>E</li>
<li>F</li>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>
I tried
<style="float:right;">
but it didn't work and i think the reason is dropdown class is not allowing it to work. It worked with using
<style="padding-left:680px;">
but i guess it's not the right way of doing this, there must be a better way. Also what happens if I use "padding-left" and I want to add something to the left of this "li" element?
This is the screen output of the bar I am talking about.
The question is that how can I do that alignment?
Thanks
Best regards
You can use .pull-right class to ul element which is comes with bootstrap.
HTML Example
<ul class="nav pull-right">
<li class="dropdown">
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
For those using Bootstrap 3, .navbar-right would do the trick.
<ul class="nav navbar-nav navbar-right">
</ul>
To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Wrap your dropdown with <div align="right">...</div> this will ensure the text in the dropdown is all right aligned.
You can use the "navbar-right" class <ul class="nav navbar-nav navbar-right">.
I recommend you to look at the bootstrap documentation and check this link bootstrap navbar component
I'm trying to do something very simple with bootstrap, I need to implement this navbar.
I know it's simple, but I tried to implement it with pure bootstrap classes.
This is the closest that I got (but I can't make the navbar background to blue):
<ul class="nav nav-pills">
<li class="active"><a ng-href="#">Customers</a></li>
<li><a ng-href="#/about">Orders</a></li>
<li><a ng-href="#">About</a></li>
</ul>
It is possible to implement it only with bootstrap classes?
It's possible, but it's kind of hacking the intended use of CSS classes...
<div class="bg-primary well-sm">
<ul class="nav nav-pills">
<li><a ng-href="#" class="btn-primary">Customers</a></li>
<li><a ng-href="#" class="btn-default">Orders</a></li>
<li><a ng-href="#" class="btn-primary">About</a></li>
</ul>
</div>
Demo: http://bootply.com/evEpR2C7DV
how is possible to make simple top menu in foundation 5? Is needed to use topbar or is there any other possibility? My actual code is:
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>Site Name</h1>
</li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="active">Domov</li>
<li>Home</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Contact</li>
</ul>
</section>
</nav>
But i have problem with mobile version. Navigation is broken and jumps under menu not collapse in simple button. Can someone tell me why? and how to fix it, or make more simple navigation? Thanks.
This is a standard foundation .top-bar navigation. Don't forget to include the necessary js files and initialize them as well.
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<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">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
Just add this
.top-bar {
overflow: visible;
}
DEMO
I think , instead of using topbar , you can use iconbar which will easily meet your requirement . UI will be same for mobile as well as for desktop version .
Check below link:
http://foundation.zurb.com/docs/components/icon-bar.html
Just looked at the Bootstrap toolkit and attempting to get the dropdown's working on the top menu.
The code I have for the menu is as follows
<div class="topbar">
<div class="fill">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Site News</li>
<li class="dropdown">
Community
<ul class="dropdown-menu">
<li>Chatroom</li>
<li class="divider"></li>
<li>Forums</li>
</ul>
</li>
</ul>
<form class="pull-left" action="">
<input type="text" placeholder="Search" />
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
Account
<ul class="dropdown-menu">
<li>Profile</li>
<li>Settings</li>
<li>Messages</li>
<li class="divider"></li>
<li>Admin</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
The dropdown isn't doing anything when clicked?
I have included the following css file.
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
Can anyone help me here?
Thanks.
Try to add the JavaScript file for the dropdown functionality too - http://twitter.github.com/bootstrap/#javascript
You need to make sure that you have a reference to jquery, and a reference to the bootstrap js in your page.
e.g
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-dropdown.js"></script>
Then, you either need to give one of your containers the attribute, data-dropdown="dropdown" , or explicitly set the container as a dropdown container using jquery, $('#mycontainerid').dropdown();
Generally having Jquery referenced above Bootstrap does the trick. You don't even have to mention bootstrap-dropdown explicitly. worked for me on two different occasions. Hope it helps!
Try adding the data-dropdown property to your initial <li> e.g.
<li class="dropdown" data-dropdown="dropdown">
Hope this helps.