Menu item jump if using menu item spacing

[businessnaples]

I have the latest version of Xtreme loaded as well as Plus. I have a regular main menu bar with a few items (2 of them have sub menus). If I leave the Menu spacing box empty the menu items remain static (in place) when moving from page to page. If I put a spacing number (1.0, 2.0, 2.5, etc.) in the box to spread the items out it does space the items but as I move from page to page using the menu, the first two items do a visible “jerk” (the two items move a few pixels to the right and then move back to position). The other items remain in place. You can see the affect here: http://www.turtlesonthetown.com/tott. Can you help with this? Happens if I align the menu either left or center and whether I adjust the vertical padding or not.

[scrambler]

I cant reproduce this on my test site. Can you list all your menu options, and if you have Custom CSS affecting the menu.

Just to be sure, try deactivating ALL non weaver plugin to see if that makes a difference

[businessnaples]

Deactivated all plugins except Weaver – Same Issue

Custom Site CSS – Nothing affecting Menus

Menu Settings Page CSS – {height:44px;} for menu bar, hover color, current page color & {font-family:arial; font-weight:normal !important; font-size:14px !important;} for Submenu Background. Removed both – Same Issue

Except for just Color settings all are default except:

Align: Center – Changing to Left no affect

Hide Arrows is checked – Unchecking no affect

Vertical Padding: 1.0 – Leaving blank no affect

Desktop Spacing: 2.0 changing number no affect but leaving blank solves the issue

Info Bar – Hide on all Devices 

Extra Menu (I use the Extra Menu Widget and include it on pages that are reached via the submenu on the main menu bar)

Text Font -Small Font, Open Sans

Align Menu Left

Hide Arrows is checked

With much fooling around I have concluded two things.

1. If there are no menu items that have submenus I can change the spacing all I want and there are no issues

2. If there are any menu items that have submenus I can leave the spacing blank and all is well. If I put any number in the spacing the jerking issue returns.

Any thing else I might be able to check? I really need to spread out the menu items some. 

I’m leaving the spacing set in case you want to view the affect (http://www.turtlesonthetown.com/tott)

[scrambler]

You say no custom CSS affecting menu, yet you added {height:44px in a lot of places…

Try removing all custom CSS to see what happens

[businessnaples]

Thanks for quick response! Removed all that CSS so there is no custom CSS in the Menu Settings Page. Same issue occurs.

I do have the following in the Weaver Custom CSS page but I don’t think any of it affects the menus?

#content, #container {overflow:visible;}

.homeslide {margin-top:0px; margin-bottom:0px; padding-bottom:0px; padding-top:0px;}

h3 {

  font-size: 1.200em;

 color:#48aa4 !important;

}

.widget-title {

  border-bottom: 1px solid #3449a2;

}

#colophon {

  position: relative;

  overflow: visible;

}

#colophon {

  background-color: #D7D7D7;

  background: #d7d7d7 url(http://www.turtlesonthetown.com/tott/wp-content/uploads/2015/04/footer-turtle-bg2.png) no-repeat;

  background-position: 98% 70%;

  background-size:58%;

}

#colophon {

  padding: 8px;

  margin-bottom: 0;

  margin-top: 0;

}

[businessnaples]

Follow-up

Just to be sure I deleted all the CSS in the  custom CSS box but the issue still occured.

[businessnaples]

Further Observation

The first menu item with a submenu is in position 2 & the second item with a submenu is in the last position. When changing pages the first & second items are the ones that “jerk”

If I remove the first item with a submenu but leave the one in the last position, the “jerk” affects all the menu items to the left of the one with a submenu

[scrambler]

I cant see why, but if the spacing setting is causing it, let us try something different.

Remove the value in the desktop spacing box

Put the rule below in Main Options > Fonts & Custom > Custom CSS Rule box

@media  (min-width:768px) {
.menu-primary .wvrx-menu-container li {padding-right:0.5em;}
}

Adjusting the value to what you need, and let us see if that works.

[businessnaples]

Vast improvement. There is no longer a “jerk” of the items. The only thing I note is that when I go from item to item that have no submenus everything is perfectly static but if I go from an item with no submenus to an item with a submenu the entire page shifts about 5px to the right (including the items on the menu bar as well as the content of the main container section)? Very weird. If I could stop that little shif this would work perfectly.

[scrambler]

I still see the problem, but if I play a long time with the page , sometimes it stops.

I am starting to wonder if something is interacting with the theme.

Can you deactivate ALL plugins (including cache plugins if you have any) to see if that makes a difference. If it does, reactivate one by one to find the culprit

We had someone who had a similar problem, and it proved to come from a plugin that was using heavy javascript loaded before the menu and was slowing down the menu display considerably

[businessnaples]

Thanks for sticking with me on this – it is an important community site.

I disabled all plugins, including Weaver Plugins. I have no Cache plugins.

Shifting still occurs when items with submenus are clicked.

I tried on different browsers and found that Chrome, Safari and Firefox all display with the same problem (and Safari does not display the left side of the full width menu?). However, Internet Explorer does not show any jumping no mater what items are clicked?

I’ll leave it as it is if you want to look.

[businessnaples]

I think I have found the culprit. 

I noticed that some of the pages accessed via the submenus had very little content and their parent pages had no content. I added placeholder text to all pages in the site that did not have any or much and then tried again. No menu jumping in any browser! FYI, earlier I had checked the box that made a page fill the browser if short of content and it didn’t make any difference for the issue so I unchecked it. 

Then I turned all the plugins back on and almost everything is still working OK except the home page.

The home page has lots of full width divs using your full width class and is just what we need. Whenever the home page is clicked the menu shifts right and then shifts back into position as the page is loading.

If I could fix that one issue we would be golden. I’ll leave it as it stands now if you want to take a look.

[scrambler]

I still see the problem on all pages…

May be @weaver can have a look to see if he can figure out what causes what seems to be a delay in the “Vertical padding” and “Desktop Spacing” to be applied when changing pages.

[Weaver]

If you are talking about http://www.turtlesonthetown.com/tott then I can’t see anything with the menus or any other problems.

[scrambler]

@weaver, the problem occurs when you change pages. click on the various menu items and observe what happens when the pages load.

The menu contracts and then expands, which is because the vertical and horizontal padding from the options mentioned above is applied with a delay

[Weaver]

When I look, the menu is absolutely rock solid – the only thing on the page that doesn’t even flicker – both Chrome and Firefox. Didn’t try IE. Don’t know what I’m missing.

[Author]

Posts