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
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.
http://www.daneliandesigns.co.uk/BKS/
The form does not scroll down on iPhone (you have to click the [+] button to activate slide in panel). I have FullPage.js enabled and this is working well. The content in the second section is scrollable on mobile but when the slide in panel is activated you can no longer scroll down on iPhone.
I have tried the following CSS but to no avail:
#media (max-width: 480px) {
.form-live, .nks-content, .fp-enabled body {
overflow:visible!important;
overflow:scroll;
-webkit-overflow-scrolling:touch;
z-index:9999999999999999999999!important;
}
}
I have also tried adding to normalScrollElements:
function(isResponsive){
normalScrollElements: '#S2', '.nks-content';
}
I am not sure this second solution would work considering the slide in panel is not part of the FullPage.js
I just want to be able to scroll the slide in content down to the SUBMIT button on mobile - namely - iPhone
I have had this issue before and It was because there was no height set. Try setting height to 100% and see if that works
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 have a website using css media queries to detect browser resolution and modify my site accordingly.
I have run into a slight problem with my main navigation menu. There are a number of pages on my site where I would like to have my main navigation hidden on load for mobile resolutions, but displayed on desktop resolutions.
This seems like a simple enough task to accomplish with css, but unfortunately for me, it is not. I am unable to use both display:none; and visibility:hidden; because when my menu detects on load that it is hidden, it sets it's height to 0, and will not change.
Here is a stack overflow page reference:
Setting a div to display:none; using javascript or jQuery
Ultimately, I the only option I found that would hide my menu on load, while still allowing the menu to correctly calculate it's height was the following bit of jQuery.
$(document).ready(function () {
$(".hide-menu").hide();
var $drillDown = $("#drilldown");
});
Now, this solution is working for pages that I would like to have the menu initially hidden on load for all screen resolutions. However, I have a number of pages on which I would like to have the menu hidden initially hidden on load for mobile, but displayed on desktop.
I have attempted to recreate this scenario in a jsfiddle: http://jsfiddle.net/WRHnL/15/
As you can see in the fiddle, the menu system has big issue with not being displayed on page load. Does anyone have any suggestions on how I might accomplish this task?
You can do it by comparing the screen-size:
$(document).ready(function () {
var width = $(window).width();
if (width < 768) {
$(".hide-menu").hide();
}
var $drillDown = $("#drilldown");
});
You can use !important to force to origional state via media queries.
This will over-ride the "display:none" from your js.
Example:
#media (max-width:980px){
nav > .btn-group{display:none}
}
Your Js then toggles style="display:block" or style="display:none"
you maximize the window and the below resets your origional style.
#media (min-width: 992px) {
nav > .btn-group{margin:0px auto; display:inline-block !important}
}
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