Title: hamburger menu issue
Last modified: November 5, 2020

---

# hamburger menu issue

 *  [mjs1974](https://wordpress.org/support/users/mjs1974/)
 * (@mjs1974)
 * [5 years, 6 months ago](https://wordpress.org/support/topic/hamburger-menu-issue-2/)
 * 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](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](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](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)

 *  [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [5 years, 6 months ago](https://wordpress.org/support/topic/hamburger-menu-issue-2/#post-13626412)
 * 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://wordpress.org/plugins/wp-browser-update/](https://wordpress.org/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](https://wordpress.org/support/users/mjs1974/)
 * (@mjs1974)
 * [5 years, 6 months ago](https://wordpress.org/support/topic/hamburger-menu-issue-2/#post-13626561)
 * 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!)
 *  [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [5 years, 6 months ago](https://wordpress.org/support/topic/hamburger-menu-issue-2/#post-13627086)
 * Hey,
    Just to follow up, where are you wanting a custom icon?
 * Ben
 *  Thread Starter [mjs1974](https://wordpress.org/support/users/mjs1974/)
 * (@mjs1974)
 * [5 years, 6 months ago](https://wordpress.org/support/topic/hamburger-menu-issue-2/#post-13627275)
 * 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!
 *  [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [5 years, 6 months ago](https://wordpress.org/support/topic/hamburger-menu-issue-2/#post-13652230)
 * Hey,
    Just so you know, you can upload an svg by using this plugin: [https://wordpress.org/plugins/svg-support/](https://wordpress.org/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](https://wordpress.org/support/users/mjs1974/)
 * (@mjs1974)
 * [5 years, 6 months ago](https://wordpress.org/support/topic/hamburger-menu-issue-2/#post-13652536)
 * 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](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/](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.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/kadence/1.5.0/screenshot.png)
 * Kadence
 * [Support Threads](https://wordpress.org/support/theme/kadence/)
 * [Active Topics](https://wordpress.org/support/theme/kadence/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/kadence/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/kadence/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [mjs1974](https://wordpress.org/support/users/mjs1974/)
 * Last activity: [5 years, 6 months ago](https://wordpress.org/support/topic/hamburger-menu-issue-2/#post-13652536)
 * Status: not resolved