3,306
pages
ALL POSTSVertical Navbar: Icons don't show up after 3rd li tag
<p>I've been told to try here since i've asked both discord and Fandom support without a proper solution.
</p><p>I'm trying to make a vertical navbar for my wikia, all good so far but the icons in the menu-preview don't show up. If you go to Alliance > Boosts, you can have a preview at right of what the page is about with some text and an icon below. Looks like it has a limit to how many icons can be shown? Icons stop to be shown with Alliance Stronghold and from Conquest Event sub-menu onwards no more icons are shown in the preview at right. I noticed in the developer tool they get transformed in some sort of .gif... i have no clue what might be the problem. Thanks in advance for the help.
https://royal-revolt-2.fandom.com/wiki/User:OPelle/Sandbox?debug=1
</p><p>Fandom Support told me that is regarding 'lazy loaded' of images.
</p>
(Edited by OPelle)
<p>I was able to fix the missing icons by using this in my personal JavaScript:
</p>
<div dir="ltr" class="mw-geshi mw-content-ltr"><div class="javascript source-javascript">
$<span class="br0">(</span><span class="st0">'.sub-hp-menu > li > a'</span><span class="br0">)</span>.<span class="me1">hover</span><span class="br0">(</span><span class="kw1">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
$<span class="br0">(</span>window<span class="br0">)</span>.<span class="me1">scroll</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></div>
<p>You might want to consider using something similar in your site-wide JavaScript.
</p>
(Edited by KockaAdmiralac)
0
<p>That made the trick, thanks a lot. Is this problem related only when you use ul and li tags?
</p>
(Edited by OPelle)
<p>No, the problem occurs anytime when the images are outside of the initially loaded part of the page before site CSS gets applied so they do not get loaded on initial page load and they can only get loaded if they are scrolled into the user's view.
</p>
(Edited by KockaAdmiralac)