I'm a bit of a novice with script but have been trying to find a solution that fits my responsive menu solution. I've seen other people with a similar issue but they seem to be using a different method for their menus.
Here is my code:
HTML:
function toggle_visibility(id) {
var e = document.getElementById('menu-items');
if ($(e).css('display') == 'block') {
$(e).slideUp('fast');
} else {
$(e).slideDown('fast');
}
};
.mobile-menu {
display: none
}
#media only screen and (max-width: 680px) {
#menu-items {
display: none
}
.mobile-menu {
display: block;
cursor: pointer;
}
}
<a onclick="toggle_visibility('menu-items');" class="mobile-menu">Menu</a>
<div id="menu-items">
Link
Link
Link
Link
Link
</div>
<!--#menu-items-->
The menu works great but the main issue I am having is that when the user decreases the window size to show the responsive menu toggle, then uses the toggle to open and then close the menu, the menu never returns to the normal view when the window is resized back to desktop view.
Oddly it does return if the user leaves the responsive menu open in mobile view and resizes back to desktop, but not if the user closes the menu.
The only other thing I'd love to work on this menu is if the user clicks anywhere else in the page but the menu, the menu closes. At the moment the user has to click the Menu toggle link to close it.
Any help would be really appreciated!!!
Thanks so much.
Try this :
#media only screen and (min-width: 680px) {
#menu-items {
display: block
}
.mobile-menu {
display: none;
cursor: pointer;
}
}
Using slideUp() and slideDown() here is a little tricky because they set/remove the inline style 'display: none;' which isn't removed when you resize the window. That's why the menu isn't reappearing: the inline style hiding the menu is still active.
What you need to do is use classes to do handle the display at different device widths and add hooks to slideUp's complete callback: (JSFiddle)
CSS:
.mobile-menu {
display: none
}
#media only screen and (max-width: 680px) {
#menu-items {
display: none
}
.mobile-menu {
display: block;
cursor: pointer;
}
.collapsed {
display: none;
}
}
#media only screen and (min-width: 681px) {
.collapsed {
display:block;
}
}
JS:
function toggle_collapsed_class(e) {
$(e).css('display', '').addClass('collapsed');
};
function toggle_visibility(id) {
var e = document.getElementById('menu-items');
if ($(e).css('display') == 'block') {
$(e).slideUp('fast', function(){
toggle_collapsed_class(e)
});
} else {
$(e).removeClass('collapsed').slideDown('fast');
}
};
Related
How can I stop the body scrolling if I open a menu on a mobile device?
function bodyScrollStop() {
$('.header .navbar .navbar-toggler i').on('click', function (event) {
$('body').toggleClass("onScroll");
});
}
bodyScrollStop();
Plz add this in css..
body.onScroll {
overflow:hidden;
}
Well i believe that you are showing that toggle button on mobile screens only. Then you can try below code.
JS Fiddle Link
JS Code:
function bodyScrollStop() {
$('.header .navbar .navbar-toggler i').on('click', function (event) {
$('body').toggleClass("no-scroll");
});
}
bodyScrollStop();
CSS:
i {
background: green;
height: 44px;
width: 44px;
display: inline-block;
color: #fff;
}
.no-scroll {
overflow: hidden;
}
Now if you click on that toggler body will get dynamic class and will prevent it from scrolling.
Let me know if you need more help.
I am trying to make a navbar where brand image can be relocated when scrolling down like the example shown on http://www.agilent.com/home
I know how to addclass using jquery, but I don't know how to add an image when scrolling down or is there any other method to make this effect happen.
How can I achieve this effect? Thanks in advance!
You need to use two images. One on the heading and one on the nav.
This snippet will detect if the navbar is on top and add sticky class to a nav element.
$(window).scroll(function() {
if ($(window).scrollTop() > $("nav").offset().top) {
$("nav").addClass("sticky");
} else {
$("nav").removeClass("sticky");
}
});
When the nav element uses sticky class, it should display the nav logo.
nav .logo {
display: none;
}
nav.sticky {
position: fixed;
top: 0;
}
nav.sticky .logo {
display: inline;
}
jsfiddle demo
Link to site
I'm trying to format the menu on the above site, when it's in sticky mode (i.e. scrolled down), because at certain widths the Request a Quote button is obscured by the screen. I'm using Javascript to action the change only when the screen is scrolled down, and an additional CSS class to move the menu. Unfortunately it's not working - while I can move the menu using just CSS applied directly to the existing class, trying to tie this in with JS to make it scroll specific doesn't any effect.
Is anyone able to tell me where I'm going wrong please?
Thank you in advance.
Javascript
<script type="text/javascript">
$ = jQuery;
$(function() {
//caches a jQuery object containing the header element
var header = $(".header-widget");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 20) {
$(".header-widget").addClass("header-widget-shortheader");
$(".second-header-widget").addClass("second-header-widget-shortheader");
$(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");
} else {
$(".header-widget").removeClass("header-widget-shortheader");
$(".second-header-widget").removeClass(".second-header-widget-shortheader");
$(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");
}
});
});
</script>
CSS
/* -----Moves menu to avoid cutting off CTA button with sticky header on mid-sized screen (toggle with JS in 'Header & Footer')----- */
#media screen and (min-width: 980px) and (max-width: 1189px) {
.stickyheader-midscreen-cta-fix {
margin: 40px 22% 0 0;
float: right;
}
}
Thanks to Marian07 for the support. This is where I ended up:
/* -----Fixes menu CTA button being cut off by mid size screens----- */
#media screen and (min-width: 980px) and (max-width:1084px) {
.sticky-enabled .navbar-wrapper {
margin-left: 0;
}
.sticky-enabled .navbar-wrapper a {
padding-right: 9px!important;
padding-left: 8px!important;
font-size: 95% !important;
}
}
#media screen and (min-width: 1085px) and (max-width:1200px) {
.sticky-enabled .navbar-wrapper {
margin-left: 0;
}
.sticky-enabled .navbar-wrapper a {
padding-right: 3px!important;
padding-left: 25px!important;
}
}
The problem is at line 6:
$(window).scroll(function() {
(did not actually call the function on scroll)
Solution:
$(window).on('scroll', function() {
For your design problem, you can decrease the width of the headers on certain screen sizes by adding the below code at the end of file: /wp-content/themes/customizr-child/style.css
#media screen
and (max-width:1200px)
and (min-width: 980px) {
.sticky-enabled .navbar-wrapper {
margin-left: 0;
}
.sticky-enabled .navbar-wrapper a {
padding-right: 7px!important;
padding-left: 7px!important;
}
}
remove . use only class name
$(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");
replace
$(".navbar .nav").addClass("stickyheader-midscreen-cta-fix");
$(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");
replace
$(".navbar .nav").removeClass("stickyheader-midscreen-cta-fix");
I have a mobile navigation only running below 1025px.
My problem is when a desktop browser is resized (or an orientation change on bigger tablets happend) from over 1024 to below it does not activate the script any more. I have tried with reload on resize, but this is not ideal because it reloads on every resize.
Here's my code:
<script>
$(window).bind('resize', function(e)
{
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function()
{
this.location.reload(false);
}, 100);
});
if (document.documentElement.clientWidth <= 1024) {
// Initialize mobile nav
}
</script>
Thanks!
add classes in every resolution and ask for them.
$( window ).resize(function() {
if(($(window).width()>1024 && $(".navigation").hasClass("mobile")) || ($(window).width()<1025 && $(".navigation").hasClass("desktop")))
this.location.reload();
}
but you should consider not to reload, but to hide/show the navigation via css media queries. reloading is a pain in the user experience:-)
Better solution:
in your css:
.desktop {
display: block;
}
.mobile {
display: none;
}
#media only screen and (max-width: 1025px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
In your html:
<div class="navigation desktop">your desktop navigation</div>
<div class="navigation mobile">your mobile navigation</div>
No js needed for that.
I am trying to make a responsive nav. I am using some jquery but I don't know javascript very well. I would like the toggle to take place when the window is a certain width (e.g. 1050px) this is the script
function adaptMenu() {
/* toggle menu on resize */
$('nav').each(function() {
var $width = $(this).css('max-width');
$width = $width.replace('px', '');
if ($(this).parent().width() < $width * 1.05) {
$(this).children('.nav-main-list').hide(0);
$(this).children('.nav-toggled').show(0);
} else {
$(this).children('.nav-main-list').show(0);
$(this).children('.nav-toggled').hide(0);
}
});
}
You can solve this by fixing the given javascript, but javascript is inefficient to handle responsive design. CSS engine is written in c++ and works faster, and automatically when browser is resized.
Better use CSS media query
The following snippet does the same as your javascript but with pure CSS.
<style>
#media (max-width: 1049px) {
nav .nav-main-list {
display: none; /* hide .nav-main-list when browser windows width < 1050px */
}
nav .nav-toggle {
display: initial; /* show */
}
}
#media (min-width: 1050px) {
nav .nav-main-list {
display: initial; /* show .nav-main-list when browser windows width > 1050px */
}
nav .nav-toggle {
display: none; /* hide */
}
}
</style>
EDIT:
As #Roko commented, media query does not work in IE8 and earlier. If you need support that browser, this post may help.