[Resolved] Navigation bar with child links resizes on page load

Home Forums Support Navigation bar with child links resizes on page load

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #90268
    David

    It looks like the space for the down arrow for navigation bar elements with children is not allocated until the arrow is drawn, causing all elements to the right of it to perform a little jump upon fully loading. Do you have any suggestion for a way to change this so that it does not visibly resize each time a new page is loaded?

    #90332
    Tom
    Lead Developer
    Lead Developer

    Hi David,

    GP uses the superfish script for the menu dropdown and arrows.

    On load, superfish detects if there’s any sub-menus. If so, it will show the arrow.

    Unfortunatey, this check needs to happen each time the page is loaded, and javascript is typically ran once everything else is loaded.

    That being said, your browser should cache the result after the initial load, so the jump shouldn’t be noticeable once it’s happened once.

    Ok, so there’s the problem – but I always like to give a solution.

    To remove the arrows:

    .sf-menu.sf-arrows .sf-with-ul::after, 
    .sf-menu.sf-arrows > li:hover > .sf-with-ul::after, 
    .sf-menu.sf-arrows > .sfHover > .sf-with-ul::after, 
    .sf-menu.sf-arrows > li > .sf-with-ul:focus::after,
    .sf-arrows .sf-with-ul::after {
    	display: none;
    }
    
    .main-navigation .main-nav > ul.sf-arrows > li > a.sf-with-ul {
    	padding-right: 20px; /* adjust this if menu width has been altered in Element Spacing */
    }

    Then, you can use Font Awesome to add your own arrows after each menu item that requires it. You can add the Font Awesome HTML into the menu item while editing it in “Appearance > Menus”.

    Hope this helps 🙂

    #90616
    David

    Hi Tom,

    Thanks for the response. I tried this and it didn’t quite work as intended. Adding the CSS to not display the arrows worked fine but unfortunately it did not remove the navigation jump on page load.

    With regard to the browser caching and not redrawing the menu with the jump, this works fine on Firefox and usually on IE 11. However, it is noticeable on roughly 80% of page loads in Chrome, even after I disabled visibility on the arrow in CSS (as well as recreated it manually).

    I did find that dequeuing superfish.js in my child theme’s functions.php removed both the arrow and the jump but I’m not really sure if there are any unintended consequences to doing so. I haven’t noticed any but was hoping you can clarify.

    Thanks!

    #90879
    Tom
    Lead Developer
    Lead Developer

    Dequeuing superfish will stop the fade transition of the sub-menu when it opens.

    That’s weird about the jump – would you mind linking to your website (if superfish is still active) so I can see it first hand?

    Thanks!

    #90911
    David

    I don’t currently have superfish active so there wouldn’t be much to show at the moment. However, using the “Want your site showcased?” thread as reference, I’m able to consistently reproduce the jump in Chrome on all sites that I’ve seen so far, which use superfish submenus. IE 11 seems to be dependent on other factors, as it’s slightly less consistent and appears to behave differently for different websites. Firefox looks like it’s completely unaffected, possibly due to caching or because it appears to wait longer before redrawing the page.

    #91032
    Tom
    Lead Developer
    Lead Developer

    Have been playing with this.

    I’ve made it so the theme adds the arrow before the javascript initializes – this should remove any weird jumping.

    It will be included in the next version.

    Thanks! 🙂

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