Canvas – Fix iOS Broken Navigation

Problem

↑ Back to top

The mobile navigation doesn’t render well in iPhone (using Safari Browser). I tested by changing the width of the browser window and it works well. The problem only exists when browsing with iPhone.

Update CSS to fix

↑ Back to top

To fix that up add the following to your custom.css (if you have child theme the style.css)

@media only screen and (max-width: 768px) {
  /* mobile styles go below this line */
  .nav li{
    width:100%;
    text-align: left;
  }
}

Add code to editor

↑ Back to top

If you’re not sure where to add the code go to your admin dashboard and then click on Appearance > Editor. On the editor page, you’ll see a list of files to the right. Scroll down to the bottom where you’ll see custom.css. Click to open this file. Then paste the code bellow this section:

/*
WOO CUSTOM STYLESHEET
---------------------
Instructions:
Add your custom styles at the end of this file instead
of style.css so it is easier to update the theme.
Simply copy an existing style from style.css to this file,
and modify it to your liking.
*/