Responsive CSS problem: Disappearing menu!

[Feznizzle]

Hi,

Here is my staging site:
http://3staging.apswittcosales.com/

The problem I have is strictly responsive CSS. To see the problem you'll have to put your browser in developer mode and inspect by device (iPad 768x1024). You will have to refresh the screen as soon as you get it in device mode (to get rid of some defaults).

Ok, once you are looking at the iPad version, rotate between portrait and landscape and watch the menu at the top (Home, About Us, Current Specials, etc).

I've been banging my head on the wall, driving me nuts! Think it is a z-index problem... maybe?

I am going BOINKERS, would really love some help!

When portrait (tall), that menu disappears. Here are a couple screenshots to illustrate the problem:

[RixStix]

Pretty sure that is as designed when width is <801 px but for some reason the "Hamburger" icon is not being presented for the menus when rotated to portrait mode. Have you done some editing that might have disabled the Hamburger icon?

[Feznizzle]

By hamburger icon... you mean the button with 3 lines to show that it's a menu? I've been calling that the mobile menu.

If that's what you mean, then yes I've done all kind of stuff to get rid of it. I don't want the mobile menu to appear accept for phones.

[RixStix]

Not sure of your question then, since you know you have removed the menu icon & other icons from tablet screenwidths below 801 px.

[carlwhat]

#1 i have no idea what a z-index problem is.

#2 you are having a javascript error here:

cbpFWTabs.js:65

you can see that in your console errors when you have the developer tools open. i do not think it is related to this situation, but i think it's always a good idea to addess these issues.

#3 i am not sure why you want to get rid of the hamburger button (https://en.wikipedia.org/wiki/Hamburger_button). in your image, it's kind of blocked behind the search button on the right hand side. it is there for a purpose, and changing when it shows up, ie based on the viewport, would be a better idea than messing with the CSS - IMO.

#4 - the "problem" is a javascript problem - not a css problem. once you have the developer tools open, and you have the tools emulating an iPad in landscape mode, disable javascript. (under chrome i press f1 and there is an option there to turn off javascript). with js disabled, now rotate the device. the hamburger button does not appear and your menu items remain. this proves to me it is a js problem.

#5 i am not the javascript guru by any stretch, however, if i was a guessing man, i would say the problem is here:

/includes/templates/responsive_sheffield_blue/jscript/jquery.slimmenu.min.js

if you were to change the resize width to a number at which point you want to convert to the hamburger button, i'm guessing that would resolve your situation. right now it is at 768. moving it to 767 (1 less than the ipad width when in landscape) mode would fix this problem.

let us know how it goes!

good luck.