I've created two dropdown using navbar-right.
Here's the fiddle for it.
Issue is... It is working fine in desktop and large screens.
If I resize the browser window. The dropdown gets in a list view with the entire width of the screen when re-sized.
Re-size the result window and you'll come to know my problem.
Help me to overcome this.
Thanks in advance.
This isn't really the way to use a Bootstrap navbar. The idea of the navbar is that it collapses down on mobile, which is what you're seeing happening here. Except, in the Bootstrap navbar, you are supposed to put some containers with specific class names and a <button> etc. You're code just seems to be using navbar-right for the sake of floating it right.
Try this instead. It's 1 list, each <li> has a dropdown. There's no navbar classes. Note that I've added the class nav. This just gives the <a> some padding and colouring on hover etc. You can remove that class and style as required. I also added the class 'pull-right' which is Bootstrap's helper class for floating right.
<div>
<ul class="pull-right nav">
<li class="dropdown">
<i class="glyphicon glyphicon-comment"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li class="dropdown">
<i class="glyphicon glyphicon-home"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li>One</li>
<li> Two</li>
<li> Three</li>
</ul>
</li>
</ul>
</div>
Some CSS
div > ul > li {
float: left;
}
This won't be responsive like the navbar, but that seemed to be the problem in the first place.
DEMO
Related
I'm using Bootstrap 3.3.4
I've following HTML code.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="projects" class="dropdown"><a class="dropdown-toggle projects" data-toggle="dropdown" href="#"><span class="projects">Projects</span></a>
<ul id="projects-menu" class="dropdown-menu">
<li>List</li>
<li>Add new project</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Now using jQuery I'm hiding the sub-menus coming under main-menu 'Projects' as follows :
$(document).ready(function() {
$("ul#projects-menu").children().hide();
});
The menu gets hide but a small white background appears beneath the menu which I don't want. For better understanding of my issue please refer below image. In this image you can see the white background appearing beneath the 'Projects' menu.
Can someone please help me in this regard?
Thanks.
Try the following:
$(document).ready(function() {
$("ul#projects-menu").hide();
});
hide the meniu not the li's
$('#projects-menu > li > a').on('click', function() {
$(this).children('#projects-menu').hide();
});
also you can like this
$(this).find("#projects-menu > li").hide();
Trying to create a changeable button-drop-down from Bootstrap HTML in conjunction with Javascript. The HTML looks as:
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Choice3</li>
<li class="divider"></li>
<li>Choice..</li>
</ul>
</div>
Would like to be able to change the choices of the drop-down button based on what else is happening on the page. So if user clicks a "profile" button somewhere on the page instead of Choice1, Choice2 and Choice3 there would be Resume, Contact Info, Education etc. The number of items in the menu would change as would the exact values for the display text. Ideally would like to use some type of array to push/pop from the choices. Have tried add, childappend, etc.
Here's one approach - have all your menu items in the HTML, and then use CSS to hide/show the appropriate ones
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul id='my-dropdown' class="dropdown-menu" data-menu-id='default'>
<li class='default'>Choice1</li>
<li class='default'>Choice2</li>
<li class='default'>Choice3</li>
<li class="divider"></li>
<li class='default'>Choice..</li>
<li class='profile'>Resume</li>
<li class='profile'>Education</li>
<li class='badgers'>Eat a badger</li>
</ul>
</div>
CSS:
/* hide all menu items */
ul.dropdown-menu > li {
display: none;
}
/* show menu items if they're relevant */
ul.dropdown-menu[data-menu-id=default] > li.default,
ul.dropdown-menu[data-menu-id=profile] > li.profile,
ul.dropdown-menu[data-menu-id=badgers] > li.badgers {
display: list-item;
}
Now use javascript to change the data-menu-id attribute on your dropdown, and the menu items will change automatically:
var dropdownMenu = document.getElementById('my-dropdown');
dropdownMenu.setAttribute("data-menu-id", "profile");
Lots of other ways to do this, but this is probably the slickest approach. The CSS basically says "if the class of the list item matches the menu id attribute on the parent, make it visible".
An advantage of this approach is that you can make a menu item visible in multiple different menus just by giving it multiple classes:
<!-- will be visible in the 'profile' menu and the 'badger' one -->
<li class='profile badgers'>Badger Resume</li>
I have cloned this template :
http://ironsummitmedia.github.io/startbootstrap-grayscale/
When you scroll-down, notice that the background-color of the header-link(About, Download, contact) on top will change to gray color (depending upon the section where you have scrolled).
I have made some small changes to the header wherien I am including font-awesome icons. The color effect has however stopped working.
<ul class="nav navbar-nav nav-advance-options hide-this-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#flax">
<i class="fa fa-leaf"></i>
</a>
</li>
<li>
<a class="page-scroll" href="#moist">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a class="page-scroll" href="#designs">
<i class="fa fa-paw"></i>
</a>
</li>
</ul>
http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav
I can't tell exactly where your javascript has gone wrong by the assets you've provided, but the issue is that on the font awesome icon version of the site (http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav), the active class is not being added to the menu li elements upon scroll, whereas it is being added to the li elements on the demo site (http://ironsummitmedia.github.io/startbootstrap-grayscale/).
solved the issue by removing the following lines from second ul:
<li class="hidden">
</li>
I don't know why this solves the issue yet. If someone understands, kindly explain
I have a navigation set up where I have a parent element and 3 children, the parent has content as do the three children. In bootstrap 3 however I can't access the parent because of the data-toggle for the children. I have it set to hover instead of click already for computer use which changes to the click for mobile use. Without breaking the mobile click on touch devices is there a way to make the parent element navigate to it's page? I've searched around but everything is either in PHP or the questions go un-answered.
This is the code I have for the navigation:
<ul class="nav">
<li>Home </li>
<li><a class="cms menulink" data-toggle="dropdown" href="/about">About</a>
<ul class="dropdown-menu">
<li>Who we are </li>
<li>Identity Mission </li>
<li>Origins </li>
</ul>
</li>
</ul>
I'm looking to either do this with just html/css or javascript/jquery.
Thanks
I've been combing around looking for an example of the same problem I'm having but no luck yet. I'm trying to create a multi-level collapsible side navigation in bootstrap using bootstrap.js.
My problem is that I've added in the second level but when I click the list item to trigger it to open it collapses the whole menu. When I re-open the menu, the second-level menu is open also. My code is below:
<div class="sidebar-nav">
<p class="sidenav-header">Units and Lessons:</p>
<ul class="nav nav-list">
<li class="nav-header" data-toggle="collapse" data-target="#content-areas"> <span class="nav-header-primary">
Content Areas
</span>
<ul class="nav nav-list collapse" id="content-areas">
<li>All</li>
<li>Urban Planning</li>
<li>Sustainability</li>
<li>Public Administration</li>
<li data-toggle="collapse" data-target="#nav-health" data-parent="#content-areas">Health
<ul class="nav-secondary nav-list collapse" id="nav-health">
<li>Introduction</li>
<li>Lesson: What is Epilepsy?</li>
<li>Lesson: Pathology</li>
</ul>
</li>
</ul>
</li>
<li class="nav-header" data-toggle="collapse" data-target="#languages"> <span class="nav-header-primary">
Languages
</span>
<ul class="nav nav-list collapse" id="languages">
<li>All</li>
<li>Arabic</li>
<li>Turkish</li>
<li>Hebrew</li>
</ul>
</li>
</ul>
</div>
The specific section I'm talking about is under the "Health" list item under "Content Areas".
Any help is greatly appreciated. Thanks!
The problem with your markup is that whole menu is collapsed when you try to click within the list. For example, if you click All inside of Content Areas it collapse the Content Areas. The same is happening for the second level menu, Health in your case.
This is caused because you don't have an accordion-heading specified. Take a look into Bootstrap Collapse Documentation where you will find an example like this:
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
Once you specify the heading your second level nav should work fine.
I have created a fiddle for you to verify. I modified the Content Areas according to the Documentation and the second level menu worked fine. However, I did not modify the Languages menu items so that you can see how it's acting (try clicking within the list once the Languages is expanded)
While Similar to Pitamber's example I would not add some of the extra classes, especially the extra div with class "accoridan-heading", just apply that class to the a tag as so.
<ul class="nav nav-list">
<li>
<a>Menu Item with No Sub-Items</a>
</li>
<li>
<a class="accordion-heading" data-toggle="collapse" data-target="#submenu">
<span class="nav-header-primary">Menu Item with Sub-Items <b class="caret"></b></span>
</a>
<ul class="nav nav-list collapse" id="submenu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
</ul>
You can go further and add CSS and or some JS to place some contrast on the sub-menu and also to flip/change the caret icon when a menu item is expanded and collapsed.