[Resolved] Flickering Navigation Back

Home Forums Support [Resolved] Flickering Navigation Back

Home Forums Support Flickering Navigation Back

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #146330
    Garth Dryland

    Hey Tom,

    Since the latest theme update my search icon is flicking off and on, moving the menu items again.

    I also note that the drop down triangles in the menu (when having page links below the primary link(s) which were previously also an issue) are working as they should.

    I assume this menu bar search icon still uses HTML code not Javascript as it was previously written when I raised this issue some months back.

    All my sites menu bar search icons flash off and back on, moving the menu items for a split second.

    I hope this is a quick fix. Its so annoying to see.
    I included a site link below for reference. Hopefully you see the issue on your connection. Thanks.


    Lead Developer
    Lead Developer

    The flicker you’re seeing is just the font icon loading – like an image, it has to load (although it’s much faster than images).

    Unfortunately there’s no real way to prevent that initial load from happening.

    Garth Dryland


    It only started doing this flicking reload thing again since the latest update. Also aren’t the triangles for the menu drop downs also images? If the drop down triangles are fine and are still images surely they should also be reloading however they are 100% rock solid? Also nothing has been changed on my site during this period other than general updates, one of which was the GP main theme.

    Lead Developer
    Lead Developer

    The arrows for the dropdown menu are actually using CSS borders to create a triangle effect – no icon fonts or images.

    You can inspect the element of the search icon to see it’s just using a regular Font Awesome icon: <i class="fa fa-search"></i>

    Chrome is known for delaying before showing icon fonts – it was touched on here: https://css-tricks.com/forums/topic/icon-fonts-pause-before-rendering/

    Alternatively, you could create an image, and then add it to your menu item, and give that menu item the class of “search-item custom”.

    Then add this CSS:

    .search-item {
        display: none;
    .search-item.custom {
        display: block;

    Personally I’ll take that extra split second of load time in Chrome over having to load an image, but it’s all preference ๐Ÿ™‚

    Garth Dryland

    Ok Tom,

    I will have a play around with that and see if I can minimize/eliminate the issue.

    Cheers for the first class support.

    Lead Developer
    Lead Developer

    No problem – let me know if you need more info ๐Ÿ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.