Hamburger menu showing open on i-Pad in portrait position

JavaScript
1

Hi there, on www.hospitality-managers.com the menu is showing in open position only in portrait mode on a 9" i-Pad. In landscape it is OK.
It is also OK on Samsung Galaxy S7 phone and Samsung 10" Tablet in both portrait and landscape.Can anybody suggest where the problem lies?

Regards Graeme

2

I think this is a js question as you are toggling the menu with some js here:

var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){$(this).next().length>0&&$(this).addClass("parent")}),$(".toggleMenu").click(function(e){e.preventDefault(),$(this).toggleClass("active"),$(".nav").toggle()}),adjustMenu()}),$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth,adjustMenu()});var adjustMenu=function(){ww<768?($(".toggleMenu").css("display","inline-block"),$(".toggleMenu").hasClass("active")?$(".nav").show():$(".nav").hide(),$(".nav li").unbind("mouseenter mouseleave"),$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault(),$(this).parent("li").toggleClass("hover")})):ww>=768&&($(".toggleMenu").css("display","none"),$(".nav").show(),$(".nav li").removeClass("hover"),$(".nav li a").unbind("click"),$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")}))};

It seems you are targeting less than 768px to turn on the menu.

i.e.

ww<768?

The ipad seems to be 768px wide so no menu appears. You would need to use less than 769px to show the toggle menu and then greater than or equal to 769px to hide the toggle etc.

This is the inherent danger of chasing devices and its better to build in breakpoints that suit the design rather than trying to catch a device.

I don’t know why you need all that js anyway as you only need js to toggle the menu on and off as required. CSS can hide and show the relevant menu based on media queries. If you do onlly want the js applied at smaller screens then matchmedia would be better than using the resize event but that’s probably a question better answered in the js forum. :slight_smile:

3

Moved to JS category per @PaulOB’s recommendation.

1 Like
4

Hello Ron,
I have been away overseas for a couple months and thought I would follow up on the post from a while back regarding the menu showing in open mode on i-Pad portrait. PaulOB gave a suggestion regarding JS and I believe you moved it from HTML/CSS to JS. I would now like to look further into it.
Best regards, Graeme

5

As a start I would suggest changing the 768 to 769 as already mentioned :slight_smile:

6

Hi Paul, Not sure if you received my email reply yesterday, but I did try changing from 768 to 769, but it made no difference, so I put it back to where it was.
Cheers,

7

No I didn’t receive any email!

I just re-tested and this is the result I get when I make the changes shown in the screenshot below.

hospitality
hospitality910×394 71.1 KB

var ww = document.body.clientWidth;
$(document).ready(function() {
    $(".nav li a").each(function() {
        $(this).next().length > 0 && $(this).addClass("parent")
    }), $(".toggleMenu").click(function(e) {
        e.preventDefault(), $(this).toggleClass("active"), $(".nav").toggle()
    }), adjustMenu()
}), $(window).bind("resize orientationchange", function() {
    ww = document.body.clientWidth, adjustMenu()
});
var adjustMenu = function() {
    ww < 769 ? ($(".toggleMenu").css("display", "inline-block"), $(".toggleMenu").hasClass("active") ? $(".nav").show() : $(".nav").hide(), $(".nav li").unbind("mouseenter mouseleave"), $(".nav li a.parent").unbind("click").bind("click", function(e) {
        e.preventDefault(), $(this).parent("li").toggleClass("hover")
    })) : ww >= 769 && ($(".toggleMenu").css("display", "none"), $(".nav").show(), $(".nav li").removeClass("hover"), $(".nav li a").unbind("click"), $(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave", function() {
        $(this).toggleClass("hover")
    }))
};

I suggest you upload the changed again and leave online so we can check live.

8

Hi Paul,
Ok, have done that. Incidentally,I had only changed it in one instance, not the two. However I have done that now and uploaded. It is still showing the same on the I-Pad in portrait. The other thing is that the dropdown menu doesn’t work. It momentarily opens, but shuts instantly. In other words, you could never use it.

9

Ok leave the code in place and I will check when I get back home this evening ( unless anyone else wants to jump in first:)).

10

Just checked on my old ipad in portrait mode and the menu is showing closed ok. Clicking on the menu link opens the menu as it should do and allows navigation of the site.

I suggest you clear your cache and try again.

11

Thanks Paul,
That did the trick.

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.