Menu Sandwich not working

Hello,

http://kadampanewyork.org is my site.

The menu button is not working for 125% but is working for other zoom levels. I am wondering why.

The main issues that at this particular level of zoom, the toggle for the sandwich menu button can be clicked but it doesn’t drop down the menu. One other thing to note is that the same button (with same zoom level) does open in mobile view.

Please let me know if you see why.

Hi there,

Not sure why this is happening but I suggest that you update the theme to version 5.1.1 and Cornerstone to version 2.0.6 as there are many code improvement from the version you are now.

Thank you.

Hello, I am not satisfied with that answer.

  1. Because I have updated in the past and the cornerstone editor became completely unusable. The screen was white and I couldn’t edit any pages

  2. This issue is clearly an error in the code, so based on the x-theme support, it’d be nice if you or someone else could investigate further.

When the theme and cornerstone are not buggy, I will update, but until then can you please at least look around a bit at the issue I am inquiring about.

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

Great than you very much

Hi there,

Would you mind clarifying the issue? I just checked it and it’s working, please provide a video recording.

What device and browser you’re working?

Plus, I should see the error in the console if this is related to a code error. And zoom (if you’re referring to pinch zoom) is not something that can be controlled by code, hence can’t be affected by or to by code.

Thanks!

Here’s the Video Link

Also it’d be good for you to see the css that I used:

/* Show mobile collapse before menu wraps automatically */
@media (max-width: 1206px) {
.x-nav-wrap.desktop {
display: none;
}}

@media (max-width: 1206px) {
.x-nav-wrap.mobile.collapse.in {
display: block;
}

.x-btn-navbar, .x-btn-navbar.collapsed {
display: block;
float: right;
margin-bottom: 20px;
color: #2789df;
}

.x-btn-navbar, .x-btn-navbar.collapsed:hover {
display: block;
float: right;
margin-bottom: 20px;
background-color: #2789df;
color: white;
}}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a, .x-navbar .desktop .sub-menu li > a:hover, .x-navbar .desktop .sub-menu li.x-active > a, .x-navbar .desktop .sub-menu li.current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav li.x-active > a{
box-shadow: inset 0 2px 0 0 #44a7ff;
color: white;
background-color: #2789df;
transition: .3s ease-in-out;

}

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
box-shadow: 0 0 0 0 #E2AF78;

}

Hi There,

I have tested on a Android Phone, Ipad and PC and it works fine, maybe by zooming like that instead of re-sizing your browser some conflict is being generated on the browser since it is not a very natural approach.

Hope it helps

Hello,
I figured out part of the issue. But now need a bit of help with the coding.

Basically, I had added css that made the menu bar disappear at 1208px however the menu button didn’t work because it still thought the desktop menu style was still visible.

So I’ve determined the bug, but I need to see how to make the hamburger button disappear until 1208px.

Hi there,

You should change max-width: 1206px to max-width: 1208px if you wish to target 1208px. And please don’t base your design in a zoom level of a browser. It’s non-standard and not all browser has that, and pixel ratio could be different.

Thanks.