Site5

Menu

Support Forums

Mobile menu does not work on Android phone

Home Forums SimpleCorp Mobile menu does not work on Android phone

This topic contains 31 replies, has 15 voices, and was last updated by  huangliyue 1 week ago.

Viewing 15 posts - 1 through 15 (of 32 total)
  • Author
  • #9645

    Hello,

    I have created a website with your awesome SimpleCorp theme.

    The url is http://www.glazenwasserijhenf.nl

    Only problem with it is that when I view the site on my Android phone (HTC one X)
    The mobile menu displays one item called “menu” but not the actual menu items itself.
    Thus navigation is not possible.

    Iphone works fine.

    Can you help me out? Did I miss something. I already searched the forum with no luck.

    Many thanks in advance.

    Greetings Machiel van Gelder

    #9758

    Has nobody else encountered this problem yet?

    #9790

    Guido
    Participant

    On windows phone no problem. There are no mobile menu settings so it must work directly.

    Guido

    #9811

    zanchit
    Participant

    This happens on my site but if you click on/press menu button it gives you all the different pages as a single drop down so you can navigate normally. Its a little cumbersome but it works fine.

    #12279

    shaug12
    Participant

    Hi – I am also seeing this issue on Android and pressing “Menu” button on mobile nav bar only reveals another “Menu” pop up – it does not reveal the additional nav li’s.

    This issue is replicable on the theme demo page. You can test this by opening the following link on your Android phone:

    http://demo.s5themes.com/simplecorp/

    You can see that only “Menu” comes up and nothing else. When you press “Menu” nav bar, only selection that comes up is “Menu” – there does not appear to be any way to select any other nav element / page.

    Any thoughts here would be appreciated.
    Regards
    Shaug

    #12281

    shaug12
    Participant

    In addition to the above – it appears that this issue only affects the home page (page with flexslider).

    If you try the Menu on any other page, it displays fine.

    I am looking into this and will post the fix if I can discover it. Probably a jquery script conflict or perhaps a css z index issue.

    • This reply was modified 4 years, 5 months ago by  shaug12.
    #12283

    shaug12
    Participant

    Alright – I have now solved this sticky little issue – here is the answer 🙂

    1) You need to update the flexslider jquery code version. The version that the Simple Corp theme is using is 1.8 and the latest version from woothemes is 2.2. I’ve installed the new jquery script and tested it and it works properly for me.

    You can update the script by going to the file in your favourite file editor (e.g. dreamweaver or whatever you use) and overwriting the code with the new version as below – then simply re-upload to your server.

    Replace following file -> wp-content > themes > Simplecorp > library > js > flex-slider > jquery.flexslider.min.js (version 1.8)
    with version 2.0 (NOTE: later versions e.g. flexslider v2.2 do not seem to work) from here:
    https://raw.github.com/woothemes/FlexSlider/6e38b5ee6f161c74b891adb6b2ff146eb60b0776/jquery.flexslider-min.js

    I believe the reason for this issue is because WordPress updated their internal jquery script versions with recent update.

    2) This seems to mess up the navigation buttons (left / right buttons) on the slider because the new JS code includes a new “flex-” word added to the .flex-direction-nav css. So you’ll need to change some CSS. For me, I simply added the following to custom.css file (to avoid being overwritten when theme is updated) and it worked fine – but you can also copy it to your style.css file if you wish (as it contains the new “flex-” element name, it should still over-ride any previous calls to the .flex-direction-nav element, however, if not you may need to remove the old declarations and/or update the colours.)

    
    /* New Woo Flex Slider version 2.2 css - place this in custom.css and it *should* work out fine */
    .flex-direction-nav li a { z-index: 3 !important; color: #fff; font-size: 40px;display: block; background-color: rgba(204,204,204,0.5);-webkit-transition: background-color .2s linear; 
    -moz-transition: background-color .2s linear; -o-transition: background-color .2s linear;transition: background-color .2s linear;}
    .flex-direction-nav li a:hover  {  background-color: #BF272D; border-bottom: none;}
    .flex-direction-nav li a.flex-next { position:absolute; top:50%; right: 5px; } /* added "flex-" */
    .flex-direction-nav li a.flex-prev { position:absolute; top:50%; left: 5px; } /* added "flex-" */
    .flex-direction-nav li a.flex-next,.flex-direction-nav li a.flex-prev { padding: 5px 5px 5px 5px; width:30px;height:25px;text-align:center; line-height: 20px;} /* added "flex-" */
    .flex-direction-nav li .flex-next  {position: relative; margin-top: -30px; margin-right:0px;float:right;} /* added "flex-" */
    .flex-direction-nav li .flex-prev  { position: relative; margin-top: -30px;margin-left:0px;float:left;} /* added "flex-" */
    

    NOTE: if the theme creator updates the theme but does not add the above changes, they will be overwritten. It is possible to write a hook to simply deactivate the old JS and replace with the new (and add css to custom stylesheet), but I don’t have time to explain how to do that here (plenty of Google articles on how to do it if you really need to)

    Hopefully, Site 5 theme crew can update the flexslider JS and css in their source code for next update 🙂

    Regards
    Shaug

    • This reply was modified 4 years, 5 months ago by  shaug12. Reason: noted that later versions of flexslider do not work
    #12294

    zanchit
    Participant

    This has been really useful. Hadn’t actually realised that my site wasn’t showing properly on the smaller android phones till you flagged this.

    In the interest of trying to have less custom css (works fine just as you have done it, but my custom css is already pages long and I am trying to simplify it) could you possibly advise where I should put that bit of text.

    The style.css just has various calls – main.css and the 320.css; 480.css and 758.css Which file should I copy it to and where?

    thanks so much

    #12295

    shaug12
    Participant

    You could try adding it to the admin theme option “custom styles” section, though I haven’t tried that – or at the bottom of main.css should do it. Worst case scenario, you can modify the existing calls. You shouldn’t need to touch 320.css etc (mobile css) as these should inherit from main.

    Theme author really needs to add this to an update, but probably not much chance of that for a while! Just be aware that if a theme update comes out without this added, it will overwrite the changes you make.

    #12296

    zanchit
    Participant

    It works fine on the ‘custom styles’ section. Will try putting it at the bottom of main.css and removing from ‘custom styles’ as I have so much other custom css. Sadly, don’t think there will be an update somehow. Total radio silence for a year now.
    thanks so much for this

    #12297

    shaug12
    Participant

    yes, the Site5 crew are rather unreliable with updates and support. Unfortunately, I found their hosting service was pretty similar which is why I don’t use them anymore. However, they must be congratulated for releasing these themes which are largely very good and of course, the price is right 🙂

    Happy New Year!!

    #12298

    zanchit
    Participant

    Hey
    Don’t suppose you know anything about Hatom Entry errors on Google plus authorship on Simplecorp site? (probably chancing my luck but no harm in asking)… Seems there is a bit of code missing on the single.php and template.blog.php but I’m out of my depth….

    #12315

    shaug12
    Participant

    @zanchit, sorry I don’t use it so can’t help! Good luck and HNY !!

    #14829

    MHolley
    Participant

    Hi, I’ve tried what was suggested above, have turned off all plugins and I’m still having issues with both the slider not resizing and the mobile menu not working on android. I’ve also noticed another bit of weirdness – when I turn off the ‘Display Blurb’ in the theme’s options panel for homepage, the menu disappears completely.

    I really like the theme but my client wants everything mobile – any ideas?

    Thanks

    #14830

    MHolley
    Participant

    Hi again,

    I cleared the cache in my chrome browser is now working! Thanks shaug12, the instructions worked for that. Unfortunately, the menu problem persists. You can see the button but it’s totally inactive.

    The site in questions is here: http://www.one-two-five.com/website/

    Thanks again for any ideas or help!

Viewing 15 posts - 1 through 15 (of 32 total)

You must be logged in to reply to this topic.