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
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.
To start I'm absolutely no hero with javascript.
I implemented a responsive topnav example from W3Schools on a website I'm building right now, but would love to know how to hide it after clicking on one of the menu items (as most will link to items on the same page, so no refresh there).
P.S. I've looked through a lot of other questions, but I just think this particular question probably has a very simple solution which would also be really usefull to be added on W3Schools.
This will close your nav after clicking a link.
var topNav = document.querySelector('#myTopnav');
topNav.addEventListener('click', function(e) {
if (e.target.tagName === 'A') {
topNav.classList.remove('responsive');
}
});
The other issue where only one menu item fills the entire list height is a CSS problem. You need to remove height: 100% when viewing the navigation in small screen dimenstions.
.navbar a {
height: 100%;
}
After I commented that line out, things look fine.
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.
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