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

[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?

[Tom]

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 🙂

[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!

[Tom]

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!

[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.

[Tom]

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! 🙂

[Author]

Posts