-
- 305 Posts
I have been trying to diagnose a layout issue for days now and just can't seem to find the culprit. This issue is driving me crazy. My site is here:
http://www.skyward.e-kahuna.com/ and my issue is when the site is minimized and the navigation menu changes to a drop-down menu, the arrows in the minimized navigation menu do not show. There is just some coding that would appear to be where the arrows should be. Usually CSS would link to an image to show the arrow but this is not the case here.
I am using wayfinder and the drop-down responsive menu I am using is SelectNav.js (
https://github.com/lukaszfiszer/selectnav.js). I am not sure if wayfinder structure is causing this. I am not real familiar with .js or SelectNav.js program and I just don't know where to turn to try and diagnose this problem.
discuss.answer
That is a character set issue. Your script is inserting a character there, but it's not a valid one for your character set or your fonts. The Wayfinder structure has nothing to do with it, it's what the Javascript is inserting.
http://lukaszfiszer.github.io/selectnav.js/
indent char - used together with nested attribute, it lets you specify the indent symbol. Default: →
You also have some mismatched element tags that while they don't cause your problem certainly don't help with proper page display.
[ed. note: sottwell last edited this post 8 years, 4 months ago.]
You also have the selectnav initialization script both in your template head (line 52) before the selectnav .js is loaded, and also at the end, after you loaded the selectnav .js file (lines 449, 450).
-
- 305 Posts
Quote from: sottwell at Dec 19, 2015, 07:10 AMYou also have the selectnav initialization script both in your template head (line 52) before the selectnav .js is loaded, and also at the end, after you loaded the selectnav .js file (lines 449, 450).
Thank you for pointing this out, I removed the duplicate: <script>selectnav('nav'); </script> from header (line #52). It now resides near the bottom of page. Good catch.
-
- 305 Posts
Quote from: sottwell at Dec 19, 2015, 07:04 AMThat is a character set issue. Your script is inserting a character there, but it's not a valid one for your character set or your fonts. The Wayfinder structure has nothing to do with it, it's what the Javascript is inserting.
http://lukaszfiszer.github.io/selectnav.js/
indent char - used together with nested attribute, it lets you specify the indent symbol. Default: →
You also have some mismatched element tags that while they don't cause your problem certainly don't help with proper page display.
Wow it really helps to ask the professionals. I appreciate you putting me on the right path I was looking in the wrong areas like wayfinder. Your advice was correct the issues was in the selectnav.min.js file.
My existing js file had this line:
||"→",u=n.label||
The newly downloaded selectnav.min.js file from github has this line:
||"→",u=n.label||
My javascript file must have been corrupted somehow, I don't know how that line got changed from the original.
This was the issue and now the arrows show properly! Thank you Sotwell!
-
- 305 Posts
Quote from: sottwell at Dec 19, 2015, 07:04 AMYou also have some mismatched element tags that while they don't cause your problem certainly don't help with proper page display.
Can you please elaborate on the mismtached element tags? I would like to clean this up, but am not sure which ones you are talking about.
A "view source" on your browser should show the errors, or this
https://validator.w3.org/nu/?showsource=yes&doc=http%3A%2F%2Fwww.skyward.e-kahuna.com%2F
-
- 305 Posts
Great, thank you for pointing to the tool!
☆ A M B ☆