Help – nav menu jumping when I refresh page!

It looks like it’s jumping because when it initially displays the little dropdown arrows are not visible, then they display and it makes the nav bar jump. If you watch it you’ll see that the right-most menu item, Contact Us, doesn’t jump, since there are no dropdown arrows between it and the right margin, to which it is aligned.

It looks like the jumping, then, is coming from the spans with a class of “drop-arrow” that are being added to the menu items that have child menu items.

To see if I’m right, try commenting out the drop-arrow class on about line 347 of your style.css which should look like this once you comment it out:

/*
.drop-arrow {
    background: url("images/drop-arrow.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 4px;
    left: 2px;
    position: relative;
    top: -2px;
    width: 7px;
}
*/

Clear your cache within WordPress if you’re running any caching plugin and clear your browser cache (Ctrl + F5) in Firefox, for example, and see if that fixes the jumping.

If that fixes it, the next step will be deciding what you want to do about it. I can think of several approaches, but the first step is to make sure I’m right.

Hi, thanks so much for getting back to me.

I commented out the drop arrow and now it isn’t jumping so you are absolutely right.

What would you sugggest to fix this?

Many thanks.

Of course, the easiest thing would be to leave the drop-arrows out like you are now.

If you want to keep them, and I can see why you would from a UI perspective, there are probably a number of ways to do it.

One thing you could do is contact the theme developer (if the jumping occurred before you modified the theme) and ask them for suggestions.

If that’s not an option, you’ll need to dig into it yourself. I recommend setting up a child theme anyway, but especially if you are going to be making more mods so they don’t get overwritten if you upgrade the theme.

If you look at line 941 of /wp-content/themes/acoustic/js/main.js, you’ll see that the code that’s adding the span tags for the drop arrow is this:

if(!jQuery.browser.opera){
			jQuery("#menu ul li").each(function(){
				if(jQuery(this).children('ul').length>0){
					jQuery(this).find('a:first').append('<span class="drop-arrow"></span>');
				}
			});
		}

And it is executed after the page displays when the function initSite is called on line 63 of the source of your page, so you get the jumping.

One option would be to hide the navigation menu by adding CSS to your style.css:

#menu {
  display: none;
}

Then find this code, probably in the header.php file for the theme:

jQuery(document).ready(function($){
	pexetoSite.initSite();
});

and change it to this:

jQuery(document).ready(function($){
	pexetoSite.initSite();
        jQuery('#menu').attr('display', 'inline');
});

The CSS hides the menu, and the extra line after the initSite function will display it once more after the initSite function is called and all the jumping will be done (hopefully). I haven’t been able to test this, but I’d give it a try and see if you prefer it to the jumping.

Thanks very much – I will give it a go. I may be able to live without the arrows if it fails.

Very kind of you to help me.

I hope it works, but there are other approaches if this doesn’t work. I wouldn’t give up. Building your own site and modifying the theme is all about having it the way you want it.