LOGICWEB Menu on Mobile Blank

HTML & CSS
1

I noticed that when viewing in mobile, https://www.logicweb.com/ does not open the side menu. Clicking the menu will slide out from left but all blank/white. I’m not sure why. I traced the issue specifically to the Redux Framework plugin. I have the latest WP (v5.2.3) and Redux (v3.6) versions installed too.

Unfortunately the original theme designer is no longer supporting the theme, nor will Redux help directly since it was bundled with the theme.

Hoping someone can figure out what would cause that. Works fine on desktop.

2

Hi,

The side menu does open when clicking the hamburger but it doesn’t show. If I remove its sticky position set by the media rule it will show.

Then as the body has the position fixed and looses its scrollbars.

The hamburger is off screen as the body gets a left margin to avoid to be covered by the side menu.

Because the hamburger is out of reach the open side menu can’t be closed.

I think the mobile layout could need a retinking. :slightly_smiling_face:

3

Hi I think the problem is the use of the 3d transform which doesn’t work well with sticky positioned elements as it seems to break the stacking context.

You have this rule.

-webkit-transform: translate3d(0,0,0);

It’s found here in one media query and possibly in others.


@media only screen and (max-width: 479px) {
 #mobile-nav.uk-offcanvas {
   -webkit-transform: translate3d(0,0,0);/* try setting the value to none and retest*/
    position: sticky;
    height: auto;
    overflow: hidden;
 }
}

Set the transform to the value of none in that media query and the other small screen media queries and re-test to see if this is the problem.

Note that your page does actually work on the iphone (tested on my iphone5s) because webkit still needs position:-webkit-sticky in order to work. Therefore the sticky position is not working on the iphone but it picks up a previous position:fixed setting instead which seems to work ok (apart from the hamburger not being available to switch the menu off again but clicking outside the menu will close it.).

2 Likes
4

Thanks. Tried this below. Cleared WP cache and Safari cache. Same issue. Side menu that opens up is all blank.

#mobile-nav.uk-offcanvas {
-webkit-transform: none !important; 
position:sticky; 
height:auto; 
overflow:hidden;
}
5

The weird thing now however is I tried a few mobile browser emulators online and also Firefox’s “Ctrl + Shift + M” responsive mode tool. This time they show the actual menu. Still not on the actual iPhone Safari browser though.

6

They are emulators and don’t display native bugs as such unless you are using the apple simulator sdk which is a true representation of the device.

I can see that in both mac Safari and ios that the menu is missing and it seems I forgot to tell you to remove the overflow hidden from the above rule as well. You don’t really want to hide the overflow on that menu anyway as you won’t be able to scroll to it.

Please re-test and update the live code so I can test for you as I can see that my previous code is not in place.

I notice that the menu is called .uk-offcanvas so of course you would need to it for whatever other countires you support or pehaps just add the 2 new rules to #mobile-nav instead and use !important on both.

e.g.

#mobile-nav{-webkit-transform:none!important; overflow:auto!important;}

1 Like
7

Bingo! You got it right, I removed overflow:hidden; and now it finally shows. Thank you very much for your help. This was pretty frustrating as it happened randomly after whatever recently Redux plugin update.

1 Like
8

One thing is closing the menu again. Logically though, no reason a visitor needs to close the menu when they opened it to visit another page from the menu options. However, would be nice to show the hamburger somehow to close it. Not sure how to fix that portion. Any help appreciated.

9

I can make the hamburger visible but it seems there is no script associated with it to close it. It just seems to open the menu when clicked.

Maybe start a new thread in the JS forum to find the script that is operating it and see if there is a script associated with closing it. There are too many scripts for me to look through and JS isn’t my thing anyway :slight_smile:

10

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