When opening the main menu (hamburger icon top right) of my page (password = "shooga1") on a smartphone, menu items are not there - menu is empty. Opening the same menu on desktop, after reducing browser window to make it narrow like on a smartphone, the exact same menu works normally.
This problem occurs regardless of which mobile browser or desktop browser is used. Pretty puzzling, any suggestion as to what is the problem or how to solve it would be appreciated.
I think the problem is that the mobile menu is empty.
In your website, there is an object's id called mobile-menu, and when users use the mobile phone to check the menu, this area will become visible.
(Normally it's invisible. When you touch the icon on the top-right side, it will become visible.)
But I can not see any code in this area. That means you designed the menu for desktop only and you maybe need to design the menu for mobile, too.
It's up to the framework you use. Maybe there are some methods that can be used to let the menu for mobile be the same as the menu for desktop.
Related
so on https://www.charitygolfsigns.com/ I have the menu collapsing into a hamburger menu icon for mobile, but tapping on it does nothing on my phone and other people's phones. Yet it works when clicking on it on mobile simulators in Google Chrome DevTools and when shrinking the normal browser window.
I've been taking the WordPress additional CSS out and back in but it doesn't shed any light on where the problem is.
Any help is really appreciated. Thanks.
Right now i dont see anything on that site, that could toggle your menu at all (even in the DevTools).
You can add a simple jquery Script, that toggles your menu:
<script>
jQuery('.header-mobile-menu').click(function() {
jQuery('#site-navigation').toggle();
});
</script>
But even if that toggles your navigation - you still need a style for it or toggle an individual block for mobile. Because right now, it would only toggle your "Desktop" Navigation
Is there a way to target css to the mobile menu only? I am using http://athemes.com/theme/Sydney and my dev server is at http://150.101.201.63/wordpress2/WordPress/
Simply put when the menu changes to the mobile menu (one with single button to open menu versus top navigation menu) I want to add some styling. I used to do this by device width but I'm finding this less effective with this theme.
Any help appreciated.
Resize your desktop window to actuate the mobile display of your site and use a web inspector tool in your browser to find the element you'd like to change.
Your Dev site is broken, but Renovation Princess uses the element #respo-menu-list-left to effect portions of your mobile menu.
I tried/guessed it and the url is http://150.101.201.63/wordpress2/wordpress/, so now uppercase in wordpress.
I looked in over the website and when it displays the mobile menu it changes the menu id to mainnav-mobi, so you can safely write you css for that id and it will only show on mobile.
#mainnav-mobi {
/* css here */
}
The entire screen flashes blue briefly with mobile chrome and hyperlinks using responsive.menu in wordpress. I'm looking to remove this effect.
You can reproduce the issue by using chrome and putting the browser in mobile mode. Navigate the browser to http://responsive.menu and use their menu on the right hand side, simply click the plus and minus arrows on the sub menu to demonstrate the effect.
Also, a screen shot and screen cast:
Shot:
https://drive.google.com/uc?export=download&id=0B-M6Yes83t08RjJ1T1IxU2JDTjg
Screen cast:
https://drive.google.com/uc?export=download&id=0B-M6Yes83t08cTRJbXNNTGdjcmM
From the author of the component:
it is due to the fact that for mobiles to detect a click event on the
body of the site without reverting to loading the jQuery mobile
library, I have added cursor: pointer; to the body.
This has the side effect of creating these blue flashes on mobile
Chrome as the browser now thinks that the whole body is a link. The
quickest option is to turn off the "Click to close menu on body
clicks" option while I see if there is a workaround in the long term.
The only way around this I can think of is to load jQuery mobile
separately, but I was always reluctant to do this.
Question update:
This only happens on chrome mobile - how do you emulate safari and firefox mobile behavior?
When i scroll right or left or up and down on mobile devices, my site seems to detach from the browser, here's a link http://www.lunacarpentry.com Not sure why?
I developed a website which displays full webpages within a lightbox when certain images are clicked - the pages relate to the images. The pages are inside an IFRAME which is inside the lightbox's content div.
The problem is this: when the page inside the lightbox is longer than the height of the lightbox and the site is being viewed on iPhone/iPad, there appears to be no way to scroll the interior page - scrolling gestures scroll the outermost page (the one that the lightbox is overlaying). Mobile Safari has no scrollbars, depending entirely on gestures for scrolling, so the interior/overlayed lightbox IFRAME seems to be unscrollable.
Are there any solutions to this? Do I need to special-case mobile browsers and open a new browser window or navigate entirely to the IFRAME'd page instead of using the lightbox?
This seems to be a real shortcoming of mobile Safari!
(Not really relevant but perhaps useful info - the site is Drupal-based; the lightbox is the Lighbox2 module.)
While not addressing the pretty serious problem of unnoticeable content on mobile safari, I would like to mention you can usually scroll this kind of content with a two-fingered scroll/swipe.
As for your case, I would do a mobile browser detect and present the user with a new browser window.