• Hi,

    I am making a website with the Kadence theme and I think there might be some bugs with the hamburger menu on mobile devices which use iOS 9.x.x or older. I have visited https://kadence-theme.com on an iPhone 5 with iOS 10 and the menu works fine but when I try and use the mobile menu on https://kadence-theme.com on an iPad 3 (iOS9), it won’t open. I have the same issue with the site I am preparing. I think this must be a theme related problem as other WordPress themes work ok.

    I also believe there is an logo alignment issue as it gets pushed up to be the equivalent of an “align top” rather than an align centre. You can see this in the following screenshot which I have uploaded to Snipboard.io https://snipboard.io/v7bDnq.jpg

    Is there any chance these issues can be fixed?

    Thanks in advance for your help.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hey,
    IOS 9 (safari version 9) isn’t on my list of our supported browsers. It’s very old so the browser is not going to support css like flexbox and grid which are heavily used in the theme. This is why the logo would be out of alignment.

    I would guess mobile navigation doesn’t work because of something in the navigation javascript that is also not supported on such an old browser. I’ll see if I can pull that up and at least take a look if there is a simple workaround that won’t hinder performance. But even if I can do that I want to make it clear the Kadence Theme is progressive and it won’t support fringe older browser in general. If your user base is commonly on an older browser you may want to install a plugin like this to notify them to update: https://www.ads-software.com/plugins/wp-browser-update/

    I’ll keep you updated if I find a progressively friendly way to make the navigation function in the old browser.

    Ben

    Thread Starter mjs1974

    (@mjs1974)

    Thanks for your reply Ben. Flexbox does work on iOS 9 to an extent as I have checked this on caniuse.com. I do however appreciate the rest of your comments about supporting older browsers if it’s not something specifically on your roadmap. I just wanted to check as I’ve used Oxygen which uses Flexbox in the header and it works fine. Maybe it is the CSS grid which is messing things up and in which case that definitely does not work earlier than iOS 10.3.

    If you can’t sort the JS thing out then not to worry. I know it’s impossible to get every everything working for every browser. If only all browsers worked the same!

    Thanks anyway and well done for a great theme! (if only you allowed custom icons in the free version!)

    Hey,
    Just to follow up, where are you wanting a custom icon?

    Ben

    Thread Starter mjs1974

    (@mjs1974)

    I should have probably made it clearer that I am using Kadence Blocks too to help page performance rather than using another 3rd party block plugin. I was trying to set up an info box with a face icon expressing fear but couldn’t find anything suitable so had to use the ghost icon. If the image option on the info box allowed the use of urls like the standard Gutenberg image block then I could have pulled in an SVG from an external source. I think you only allow custom icons in the pro version of Kadence blocks so I appreciate you needing to charge for it. It’s not a deal breaker at the end of the day as I have still been able to put together the section of the site using the included info box icons.

    I really like the fact that the theme does so much without needing extra plugins such as the contact form with the honey pot feature. I recently came across a plugin which does the same thing but I won’t be needing that now.

    I will be keeping an eye on your website later this month.

    Cheers!

    Hey,
    Just so you know, you can upload an svg by using this plugin: https://www.ads-software.com/plugins/svg-support/

    And then you can select that svg in the info box. If you tell the plugin above to inline the svgs you can even set the colors.

    I hope that helps,

    Ben

    Thread Starter mjs1974

    (@mjs1974)

    Thanks for that Ben. I did come across that plugin (apparently not 100% safe) as well as “Safe SVG” which sanitises all SVGs on upload. I couldn’t though remember from where I got the SVG files as I downloaded them a few months back so wasn’t sure if it would be 100% secure.

    I recently found this website https://iconify.design. Once you find the icon you require, if you copy the code from the SVG tab, you can then go to this website:

    https://yoksel.github.io/url-encoder/

    and paste the code into “Insert SVG”.

    You then use the code in the “ready for css” section taking only the code between the opening and closing speech marks “”. In WordPress itself, you can then use the url (not including the speech marks) in the WordPress image block.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘hamburger menu issue’ is closed to new replies.