Reply To: Navigation bar with child links resizes on page load

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

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

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