I’m having an issue with the layout of my website on mobile devices. Specifically iPhone and Android phones.
It’s hard for me to explain the actual issue other than to say that the website just doesn’t display correctly.
If you have a look at http://www.origamidojo.com.au/ (on a mobile device) you’ll see what I mean ….. there are overlapping images and no menu. You therefore can’t navigate around the website.
If you go to one of the other pages e.g. http://www.origamidojo.com.au/about/ then the display is a little better but there is still no menu displayed.
I’m assuming this is because of something the I’ve done because you advertise your theme as being fully responsive and I don’t see that anyone else is complaining that it’s not.
However I have no idea what I may have done wrong and I don’t know where to start looking.
Anyway assistance you can give will be appreciated.
Thanks for your quick response.
Sorry for the incorrect CSS code. I’m not very good with CSS. What I was attempting to do was remove the Woocommerce Cart Icon from the menu and didn’t realise that I had removed the entire menu icon (from mobile displays).
Anyway I have replaced my original code with ….
display: none !important;
which seem to correctly remove the cart icon while not affecting the display of the menu icon on mobile displays.
However I still have two problems with the mobile display:
1. On the normal browser view of the website, in the left panel, you just see the logo with the expanded view on the menu beneath it. This is ‘by design’ because in the theme options I have set ‘Collapse Menu’ to OFF and in all of my pages I have set ‘Collapse Menu’ to DEFAULT. However in the mobile view, all the pages show the menu icon at the top (circle with three lines) which you need to click to expand the actual menu. This is not what I want. I want the menu to be automatically displayed in the mobile view just like it is in the browser view. What do I need to do to achieve this?
2. If you go to the home page of the website on a mobile device all you see is the menu icon and the logo image which takes up about three quarters of the screen display. The Slide Set images are mostly hidden “underneath” the logo image rather than being positioned “below” the logo image. Also, if you click the menu icon to display the menu then the Slide Set images completely disappear. Is there something specific that I need to do so that the slide set images are displayed on mobile devices?
Just an additional note: If I completely remove the CSS code mentioned above that does not have any effect on the two issues that I’ve mentioned. The only difference it make is that I also see the Woocommerce Cart Icon as well as your menu icon on the mobile displays.
Once again welcome you advice on how to resolve these issues.
The best solution here would be to use the Collapse Menu on that the fullscreen page, this will give maximum exposure to the images being displayed and you click it once and the menu and logo are visible.
Unfortunately the fullscreen slider can’t be pushed down and I feel it’s bad to load a page and just see the menu and logo on a phone.
I can force the open menu open on all pages, however this would require customization via the customization forum.
My apologies, I didn’t want my reply to cause offence. I genuinely did not realise you had enabled the option and it wasn’t working. The option itself it working on the test and live demo, therefore I assumed it was working for you but you wanted the menu to display fully all the time and hence why I offered the customization service.
If there is a bug with the theme I fix them for free and do not make users sign-up to a customization service to fix them, so again my apologies for the confusion I caused.
Can you post your WP login details and site URL and i’ll login and take a look as to why it’s not working.
Hello again Andy
Thanks for your reply. Firstly let me say that I feel bad because my last message to you was so aggressive and once again I apologise.
I also apologise for yet another long post 🙂
However, to be truthful, I’m still feeling quite frustrated but I don’t want to start another attack on either you or your theme.
So I’d just like to clarify the current situation ……
1. I am relatively happy with the way the menu and logo are being displayed on both the PC web browser and on mobile devices. The point that I was trying to make is that (I believe) that the ‘Collapse Menu’ option is not working correctly.
On my Home page currently I have the ‘Collapse Menu’ set to “Off”.
I assumed that setting the ‘Collapse Menu’ to Off would force the menu to be always open in both the browser AND on phones but, as I said, this is not happening (at least not for me).
If you look at my home page in a web browser it looks the way I’d expect (i.e. with the menu open) but if you look at the home page on a phone, the menu is ‘collapsed’ (i.e. you only see a circle with three lines).
This is why I was annoyed by your comment that it would require “customisation” to force the menu to be open because I thought that that was what setting the ‘Collapse Menu’ to “Off” was supposed to do.
2. Additionally, your comment …
“The best solution here would be to use the Collapse Menu on that the fullscreen page, this will give maximum exposure to the images being displayed and you click it once and the menu and logo are visible.”
suggests to me that you are saying if I “Enable” the “Collapse Menu” then both the actual menu AND the logo will be initially hidden on mobile devices.
But this also is not the case.
If I set the ‘Collapse Menu’ set to “Enable” on my Home page then you look at my home page in a web browser, the menu is still “open” but if you look at the home page on a phone, the menu is ‘collapsed’ (i.e. you only see a circle with three lines) BUT the logo is still visible.
So ……… my point is that (for me) the Collapse Menu “Off/Enable” setting makes no difference to the way the menu and logo are actually displayed in either the browser or on mobile devices.
Having said that I’m actually now resigned to the way the logo/menu is being displayed on both the browser and mobile devices.
3. The ISSUE that I still have is with the fullscreen slider.
I was surprised by your comment ……
“Unfortunately the fullscreen slider can’t be pushed down”
and I’ve already made the point that your comment is not correct.
However the problem is that, ON MOBILE DEVICES, the branding logo overlays the slider so that you can’t actually see the slider.
I’ve spent a lot of time trying to work out how to “force” the slider to respond like the other pages (i.e. to reposition itself BELOW the menu so that you can actually see it) but without any luck.
It seems that the fullscreen slider has been designed to be in a fixed position on the page and therefore, on mobile devices, the menu and logo simply overlay it so that the slider can’t actually be seen.
Can I ask that you reconsider this design decision.
I believe that it would be much more functional for the slider to respond like other pages and reposition itself BELOW the menu so that it can always been seen.
4. I’ve spent a lot of time struggling with this slider problem on mobile and I finally stumbled on a possible solution of setting the ‘Auto-Hide Menu Timeout’.
As you would know, if I set the menu timeout to (say) 10 seconds then, after 10 seconds, the menu will slide off the screen to reveal the fullscreen slider.
My problem is that I don’t use this menu timeout setting because, well frankly I don’t like it.
Particularly in a web browser view I don’t want the menu ‘and logo’ to disappear from the screen. I want the logo to always be visible on every page.
Having said that, I suppose this could be a solution to the problem of the logo always overlapping the slider on mobile devices.
However it doesn’t seem that I can enable the ‘Auto-Hide Menu Timeout’ setting ONLY FOR MOBILE DEVICES.
IN SUMMARY ………….
The issue that I still have is that the menu and logo overlaps the fullscreen slider on mobile devices so that you can’t actually see the slider.
My preferred solution is that you consider enhancing your theme so that the slider automatically repositions itself to be always visible below the logo and menu (i.e. the it acts exactly the same as other ‘normal’ pages).
Alternatively, that you change the ‘Auto-Hide Menu Timeout’ setting so that you can restrict it to only activate on mobile devices.
Please let me know your thoughts about these suggestions/requests.
PS: In you last post, you asked for login details so that you can look at why the ‘collapse menu’ setting appears to be working differently for me. As you can see I haven’t done that. If you really need access to my system then I suppose I could set you up with a login however I would want your assurance that you won’t make any changes without letting me know exactly what you’ve done and why.
Thanks for the reply. I see where the confusion is now. I should re-name it to “Collapse Menu Sidebar” instead. The option is there to collapse the Menu Sidebar into a single icon, once you click it the Menu / Logo ( Header ) will appear.
I’ve just created this page to demo it working http://epix.themeva.com/fullscreen-collapse-menu/.
The only reason I want your login details is to see why it’s not working for you. Are there any caching plugins that could have an effect on things?
All I wish to do is enable the option and see why it’s not working for you, I can assure you I will not touch anything else.
You must be logged in to reply to this topic.