Bootstrap 3 multi level dropdown menu not working on mobile devices. I checked many solution in StackOverflow. That solution for Desktop not for mobile. Below is the best solutions for multi lebel dropdown menu.
Bootstrap 3 dropdown sub menu missing
https://github.com/djokodonev/bootstrap-multilevel-dropdown
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
});
Above code is working well for desktop.
Live example: http://rahulmoral.com/portfolio/essanet/
Please view on mobile devices. Second level dropdown-menu will not work on mobile devices.
It's actually working just fine. You need to scroll in order to see the expanded menu. However, to get it to work as you'd like, simply overwrite the max-height:
.navbar-collapse {
max-height: none;
}
i got it to working by adding this to my css
#media screen and (max-width: 767px){
.navbar-fixed-top .navbar-collapse{
max-height:100%;
} }
but instead of 100% you can also use none. i am using a fixed nav which is why i have navbar fixed top. u can change it to static or w.e. you are using.
Related
hoping you could help. So, Im using xtheme, and wordpress. And I have code to make my mobile menu a fixed top menu, so its always visible. I also have JavaScript to make it retract upon clicking a menu item so the menu doesn't cover the screen.
css to make it fixed:
#media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed!important;
}
}
Javascript:
jQuery(document).ready(function($){
$('.x-navbar .mobile .x-nav >').on('click touchend', function(e) {
document.getElementsByClassName("x-btn-navbar")[0].click()
});
});
This works to a point, however, if you go to this page: https://foresthillcentre.com/mental-health-services/
And try the menu on all of the submenu items (setup to scroll to section on same page) The menu retracts before you can click on anything, and you have to re-click the hamburger to bring up the submenus. You will see what I mean on use...
Any suggestions to fix this?
Thank you.
I've been working on a website and when testing it out on a VM the slide menu didn't work. I've since managed to replicate the error in newer versions of Chrome The page is
http://paperfromabc2xyz.co.uk/
When you shrink the screen size small enough to loose the main menu you'll get a NAV Burger icon. Clicking this should slide a menu in. The Javascript file is 'App.JS'
The click does not get caught, somehow because the span does not have dimensions (the :before element does not expand it).
Add this to your styles:
span.Burger{ display: inline-block; }
for a start use a library as Jquery to simplify your code; then put your javascript code in an $(document).ready(function () {} then then add to your css : span.Burger{ display: inline-block; }
I have created a responsive mobile menu using jquery. Everything works fine except the toggling of the menu. By default the menu is expanded. I want the menu to be collapsed by default and when the word menu is clicked it expands and is then able to expand and collapse on selection. The only point of consideration in this is that there is also a normal navigation menu, which is displayed and layout differently. I wish for this menu to be always active. I only want the mobile menu to be hidden (collapsed) by default and then expanded on when clicked.
I have uploaded the projected onto jsfiddle: linkhttp://jsfiddle.net/qdhg0r9d/
thanks
Just add
#media screen and (max-width: 600px) {
#collapse-menu{
display:none;
}
}
To your CSS this will hide it by default when the screen width is less than 600px, then when you click the toggle jQuery will over ride it for you by adding the inline style display:block; and display it again
$(document).ready(function () {
if($(window).width() <= 640){
$("#collapse-menu").toggle();
$("#pull").on('click',function () {
$("#collapse-menu").toggle();
});
}
});
it only works depending on the screen width
I have looked all over online trying to solve this problem. I am in the process of making a desktop website responsive for mobile and have run into issues with the Navigation menu. I have set it to display:none for the mobile version but I want to make it so it can be seen by clicking on either an image or text. The solution that I have found elsewhere have all only worked with a div menu that only has UL and LI elements in it. Mine has H2 tags for each "section", etc. I just would rather have a button click and bam the whole DIV shows up just on a mobile query without messing with any of my HTML code, etc.
I have found this jquery code that seems close, however it seems to hide the nav div on desktop. I need it to work with display:none only set in the media query via CSS.
$("#preview").toggle(function() {
$("#navi").hide();
}, function() {
$("#navi").show();
});
});
It gets called by just clicking on the text such as "Click here for menu"...Would also prefer that to be a button or a link.
Try $.toggleClass() instead of using $.hide(). This way the media query css will have more control. The following is an example that a button that hides a div only in screen smaller than 700px.
JS:
$("#preview").toggleClass('hideInMobile');
Css:
#media (max-width: 700px){
.hideInMobile
{
display:none
}
}
demo:http://jsfiddle.net/HZDCW/2/
Hope it helps.
Is there a way to make it so that when the navigation shrinks down all or any of the drop down menus are expanded? thus when the user touches the navigation and it drops down all the drop down navigation items are already fully expanded?
I assumed this was a default behaviour but this seems to not be the case for me.
Instead my navigation looks as such:
I had to hover over Menu item to get that secondary menu. Is there a way to have this and all other drop down menus already expanded?
It was only starting in version 2.2 that the behavior you want was replaced by the current behavior of having dropdowns be collapsed/collapsible in a collapsible navbar.
I threw together the following workaround, which seems to do the trick:
$('.nav-collapse').on('show', function (e) {
var $dropdowns = $(this).find('.dropdown');
setTimeout(function () {
$dropdowns.addClass('open')
});
});
The reason for the setTimeout is because otherwise the original click event which triggered opening the navbar will end up closing the dropdowns again when it propagates up to the <html> element.
The correct answer to fix this is to do the following: Which is seen here.
#media (max-width: 980px) {
.dropdown ul.dropdown-menu {
display: block;
}
}
This is for version 2.2.2