1. Documentation /
  2. Canvas - Fix iOS Broken Navigation

Canvas – Fix iOS Broken Navigation


↑ 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.

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{
    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:
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.