Canvas – Fix iOS Broken Navigation

Problem

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.

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code/templates and resolving potential conflicts, contact a WooExpert.

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;
  }
}

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.
*/