Posted By admin
Bootstrap NavBar Menu Dropdowns
Demo

There is a issue where if you try to put the dropdown submenu on the right it overlaps the text so set the class to navbar-right instead of just having it in the center and you will see it does not do it here but will for sure do it on your site.,If anyone runs into the solution for this please do help.,if your try to add the Submenus on the navbar-right class all the links go under the text no matter what. Anyone got a fix?….I would really light to put the dropdown sub menu on the right side not in the center.,My rewrite to make sure when you close the parent, all the childs is close too:, $(document).ready( function() {$(“li.dropdown-submenu > a”).on(“click”, function(){$(“li.dropdown-submenu”).removeClass(“open”);if($(this).parent(“li.dropdown-submenu”).hasClass(“in-use”)){$(this).parents(“li.dropdown-submenu”).addClass(“open”);$(this).parent(“li.dropdown-submenu”).removeClass(“open”);$(this).parent(“li.dropdown-submenu”).removeClass(“in-use”);$(this).siblings(‘ul.dropdown-menu’).children(“li.dropdown-submenu”).removeClass(“open”);$(this).siblings(‘ul.dropdown-menu’).children(“li.dropdown-submenu”).removeClass(“in-use”);} else {$(this).parents(“li.dropdown-submenu”).addClass(“open”);$(this).parents(“li.dropdown-submenu”).addClass(“in-use”);}return false;});});,How can I use the dropdown links as a clickable link to open the page?I want to open page onClick an onOver the dropdown should appear,While using the code, right click on the submenu works but the left click does not due to the data toggle and drop down classes for submenu anchor links,,Add the below code when using bootstrap with WP, and it works…,$(document).ready(function(){, $(“ul li:has(ul)>a “).addClass(“dropdown-toggle”);, $(“ul li:has(ul)>a “).attr(“data-toggle”,”dropdown”);, $(“ul li:has(ul) ul “).addClass(“dropdown-menu multi-level”);, $(“ul ul li:has(ul) “).addClass(“dropdown-submenu”);,});,when i add some more links on the navigation and open the sub menu it will goose under the browser on the right side,add scroll on overflow ..,Does not work,To use on mobile, or with a click, juste add this JS :,$(document).ready( function() { $(“li.dropdown-submenu”).on(“click”, function(){ $(“li.dropdown-submenu”).removeClass(“active”); $(this).addClass(“active”); return false;});});,And change the css “:hover” by,.dropdown-submenu.active>.dropdown-menu { display: block;},.dropdown-submenu.active>a:after { border-left-color: #fff;},I don’t understand where this should be inserted. My apologies i’m new to web design and I hope someone can help and explain it to me.,There is a problem with the line “return false” all link are disabled … help with that problem,I changed the script to this:$(document).ready( function() { $(“li.dropdown-submenu > a”).on(“click”, function(){ $(“li.dropdown-submenu”).removeClass(“active”); $(this).parent().addClass(“active”); return false; });});,And the submenu links work again.,Mobile click on a sub-menu opens, when you release the button, the menu closes.,I can’t access anything below the first level of dropdown on my phone, any time I click “Dropdown” the “Menu 1″ closes. Is there a fix for this?,yess check the first comment … and follow the instructions carefully :D,Hola, estoy comenzando con esto y me estoy teniendo porblemas para agregar el submenu, el codigo del css en que archivo lo agregaria? Lo que estoy haciendo es soltar el codigo al final del .css pero no me esta funcinando, hay que escribirlo de alguna manera? gracias,.dropdown-submenu {, position: relative;,},.dropdown-submenu>.dropdown-menu {, top: 0;, left: 100%;, margin-top: -6px;, margin-left: -1px;, -webkit-border-radius: 0 6px 6px 6px;, -moz-border-radius: 0 6px 6px;, border-radius: 0 6px 6px 6px;,},.dropdown-submenu.active>.dropdown-menu {,display: block;,},.dropdown-submenu>a:after {, display: block;, content: ” “;, float: right;, width: 0;, height: 0;, border-color: transparent;, border-style: solid;, border-width: 5px 0 5px 5px;, border-left-color: #ccc;, margin-top: 5px;, margin-right: -10px;,},.dropdown-submenu.active>a:after {,border-left-color: #fff;,},.dropdown-submenu.pull-left {, float: none;,},.dropdown-submenu.pull-left>.dropdown-menu {, left: -100%;, margin-left: 10px;, -webkit-border-radius: 6px 0 6px 6px;, -moz-border-radius: 6px 0 6px 6px;, border-radius: 6px 0 6px 6px;,},The author is fontenele

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *