http://codepen.io/ruchiccio/pen/ONvoaE
I have a navbar with a dropdown menu. This dropdown menu has a few children, one of which is also a dropdown list (i.e. Brands). When I click this dropdown list and then close it up again with the toggle caret, the 1px border around my entire navbar-collapse div disappears. I can't see what causes that to happen.
I also get weird border changes when I click the Brands dropdown, toggle it closed, and then try clicking a regular link in the dropdown menu (i.e. About).
Here is what the code looks like:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a>About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Brands<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a>Brand 1</a></li>
...
I figured out a solution. I gave navbar-collapse absolute positioning, with right:0 to keep it at the right side of the screen. Apparently, floating doesn't agree with the collapse.
Related
I have a navigation menu which is almost perfect.
On Mobile:
When I open the hamburger menu, it will take up 3/4 of the screen size. I am okay with that. When I click on one of the links in the navbar I am taken to the correct section but the Menu remains open.
I prefer having the menu close as soon I click on one of the links rather than me having to press the Hamburger to close the menu.
HTML:
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Education
</li>
<li>
Experience
</li>
<li>
Testimonials
</li>
<li>
Skills
</li>
<li>
Contact
</li>
</ul>
</div>
you can add click listener on all of <a>'s and then close the bar in listener function
best way to do this is to give same class to all of them and add listener to them with for loop
or you can use jquery so you wont need for loop
$('.nav a').on('click', function(){
$('.navbar-toggle').click();
});
Use this code, it will call click event for navbar-toggle class when you will click on navigation bar items. Which will close the navigation bar as you wanted.
I have a navigation menu that I created using Bootstrap 3. The menu has two dropdowns. Here is how I want it to behave:
Click menu 1 > dropdown menu appears
Click menu 2 > menu 1 closes > menu 2 dropdown appears
Here is what is actually happening:
Click menu 1 > dropdown menu appears
Click menu 1 again to close it
Click menu 2 to open it
What I have tried:
There is a similar question here: Avoid having to double-click to toggle Bootstrap dropdown. The solutions seemed specific to using angular with bootstrap, but I tried them anyway. Here is what happened:
One solution mentions getting rid of bootstrap.min.js. That solution is for Bootstrap 4.
A second solution includes stopping default behavior of the dropdown this way:
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
But if I add that, the dropdowns don't work at all. When I click them, nothing happens.
The last solution I tried included removing data-toggle="dropdown". That resulted in the dropdowns not showing up at all as well.
Question:
Does anyone have a solution for how to remove the double click functionality so that I don't have to double click to close one menu before I can open another? I am just using Bootstrap (not angular and bootstrap), and I am using Bootstrap 3.
My code:
Don't know if this is helpful, but here is my navigation bar code:
<nav>
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Option 1<span class="caret"></span></a>
<ul class="dropdown-menu" style="position:relative;width:100%;" id="option1menu">
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" >Option 2<span class="caret"></span></a>
<ul class="dropdown-menu" style="position:relative;width:100%;" id="option2menu">
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</nav>
I have a simple 2 level dropdown nav in bootsrap with the code below:
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav pull-left">
<li>Főoldal</li>
<li class="dropdown">
Iskolánk
<ul class="dropdown-menu">
<li>Alapadatok</li>
<li>Még egy teszt menü</li>
<li>Osztályok</li>
<li>Teszt menüpont valami</li>
</ul>
</li>
<li class="dropdown">
Információk
<ul class="dropdown-menu">
<li>Teszt, infók menüpontba</li>
</ul>
</li>
<li>Árlista</li>
<li>Hírek</li>
<li>Képgaléria</li>
<li>Dokumentumok</li>
<li>Kapcsolatfelvétel</li>
</ul>
</div>
I added this css to the style file, because i want to show the submenu on hover, not clicking a nav item.
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
When i click the "iskolánk" nav item, and move the cursor to the submenu, the "Iskolánk" nav item will get a white background, that shows me, that this is the active item, and also shows the submenu.
If i dont click the "Iskolánk" nav item, only just hover it, the submenu shows up, but if i move the cursor to the submenu, the "Iskolánk" nav item looses the white background, and it doesnt show that that is the active nav item.
How can i do that? I want to show the submenus always on hover, and not by clicking the parent. The bootstrap css and js file is from the bootstrap website, i dont change anything in them.
The problem is when you are moving to the submenu, cursor leaves the menu (parent) so the CSS hover does not work on it. So to solve this you can write a simple jquery code which keeps the hover effect on the parent(menu) when you are moving to the submenu. but remember, when you are leaving that submenu, you have to remove that effect from the parent.
Add this code snippet to your HTML file.
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown-menu').hover(function(){
$(this).parent().css({background:'#eee'});
})
$('.dropdown-menu').mouseleave(function(){
$(this).parent().css({background:'#fff'});
})
})
</script>
I have a boostrap navbar with white links on black. When I reload the page the links are black until I select them with my cursor which causes the white to appear as I slide. The problem is solved if I add a blank href="" attribute. However I would like to figure out why this is happening and if there is another solution.
<ul class="nav navbar-nav pull-right">
<li><a ui-sref="home">Home</a></li>
</ul>
This solves issue:
<ul class="nav navbar-nav pull-right">
<li>Home</li>
</ul>
Attached is a shot of what I mean - I am slidig the mouse from left to right over the link.
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