Version 6 Update Nav Menus Not Formatted

Question

I've started building my website using the recent update and for some reason the navigation menus aren't formatted properly. I'm not sure if it's something I've done wrong or the code. It worked perfectly in the previous version.

Please can you take a look at my website to see the effect and hopefully provide a fix. I'd really like to use version 6 but if I can't get this fixed I'll have to go back to the previous version.

Thanks

Bruce

SemiColonWeb · Accepted Answer

Hello,

The Issue is with using the Old HTML Codes from the Previous Versions of Canvas. Please make sure that your Codes look like this:


&#x9;
- 
&#x9;&#x9;[Home](index.html)
&#x9;
&#x9;
- 
&#x9;&#x9;[Park & Reserve Maps](self-drive-maps.html)
&#x9;
&#x9;
- 
&#x9;&#x9;[Guide Your Own Safari eBook](self-drive-ebook.html)
&#x9;

This should definitely work fine. Please consider checking the Migration Guides for the Menus: http://docs.semicolonweb.com/docs/upgrading-v5-to-v6/migration/ . Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

safaridude · Answer

Excellent, thanks that did the trick.

Another issue I'm having is with the map. It appears when I access the website on a laptop but when I use a mobile it disappears. The headings next to it are there but not the map itself. I had a look at the migration documentation and also double checked the code to make sure it was version 6 code but cant figure out why the map doesn't appear on a mobile browser (brave and chrome browsers).

Semicolon Web · Answer

Hello,

The Maps have the Display Utility classes from Bootstrap: .d-none and .d-md-block which makes the Map disappear on Mobile Devices. To fix this, simply remove these 2 Classes and add the .min-vh-50 Class in their place. This will ensure that the Maps are displayed on Mobile Devices with 50% Height of the Mobile Screen.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.