Issues with Menus on Xtreme 6.0.2

[hkp]

@Weaver

Site: https://www.hiskingdomprophecy.com/

I have been using Weaver Xtreme 6.0.2 and Theme Support 6.0.2 on WP 6.1.1 since you made your 6.0 available and have had no issues with it. (PHP Version: 7.4.8)

However today, I turned OFF SmartMenus, (to get evenly spaced menu headings) and unusual menu issues immediately arose.

Turning ON the SmartMenus again resolves all issues, and the menus all work as normal again.

At the moment, for your checking, SmartMenus are OFF.

When a non-signed-in visitor clicks any menu item, the whole site jumps momentarily to the side, and then back again. This did not happen previously.

When a signed-in user clicks any menu item, the whole menu bar (either primary or secondary) and its sub menus, disappear for about 2.0s and then returns as the new page is displayed.

I have not had a chance to do more checking yet. I plan to revert to Xtreme 5 and test it, and also test all plugins for conflicts as soon as and when I can get time.

Regards and thanks,
Angus.

[scrambler]

I am not experiencing what you mention (I cannot test the signed in part)

Have you cleared all your caches, and try different computer / browser

 

[hkp]

@Scrambler

Thanks.

Just briefly tested on another computer – both logged-in and not – and results are the same and as previously described.

The Firefox browser by far is the worst on the other computer for non-logged in, and Firefox is what I use on my own pc, though all other browsers do the same.

So it seems to be browser related, to some extent, as far as I can see at the moment.

Will check more asap and let you know.

Regards and thanks!

[hkp]

@Scrambler

The above issue seems to be theme/css related. I tested with no plugins and there is no change to the described issue.

With no cache, SmartMenus OFF, and NO Menu Arrows selected, I also tested Xtreme 5 and got the same issue. However, Xtreme 4 works correctly.

I use a child, but that does not change these results. Xtreme 4 works, but not 5 or 6.

So, when I turn SmartMenus OFF, I get the equal spacing between the menu headings which I want, but there is now this disappearing menu bar issue.

Additionally, I have now found that I have some CSS tricks to add menu titles to the phones and rename the menus.

With SmartMenus OFF, these tricks do not work, and both are titled the same and have alignment issues.

So, this takes me back to my previous Forum Discussion, to “Equally Space the Menu Headers”, to which you replied:

“I believe the menu items with a sub menu have extra space for the arrow that normally opens up the sub menu.

before we force spacing with Custom CSS, you should explore the smart meu options regarding sub menu arrow or lack thereof styling”

Can you possibly provide some Custom CSS which will allow SmartMenus ON, but set the arrow width provision to Zero?

Or perhaps omit the arrows totally, as we do not use them, as just hiding them does not work to reduce the spacings?

The aim here is just to have small and equal spacings between the menu headers, with SmartMenus ON.

FYI, I have now reverted the site to SmartMenus ON, as otherwise it is too distracting when working.

Regards and thanks,
Angus

[scrambler]

This reply has been accepted as the best answer.

The rule below should do it

.is-menu-desktop .wvrx-menu.sm .has-submenu {padding-right:.5em;}

 

[hkp]

Thank you @Scrambler

That worked indeed perfectly!

Now all menu headings are equally spaced and  the SmartMenus work correctly too.

Much appreciated!

Regards and thanks,

Angus

 

 

 

[scrambler]

FYI,

You should not have needed the rule to remove the space if you hide the arrow using the Theme menu option “hide arrows”

[hkp]

@Scrambler

Understood.  However, that is not how it is now working for me.

FYI, here are screen captures from my home test site showing what I get.  The results are the same as the live site. (All software is same as live site – other than these use PHP8.)

To me it looks like the “Hide Arrows” simply does not “display” the arrows, but still gives the space provision for them.

SmartMenus = OFF : Hide Arrows = OFF

SmartMenus = OFF : Hide Arrows = ON

SmartMenus = ON : Hide Arrows = ON

As mentioned previously, because of existing css for the mobile menus on the live site, I cannot turn off SmartMenus to equally space the headings.

The above samples have no menu related css added.

Hope this helps.

Regards and thanks!

[Weaver]

 

I can see a difference in the menu layout with smart menus off and on and arrows hidden as in your last two screen shots when testing with my dev site. (Was not easy to replicate – took using different browsers from settings view and user view.)

This has no doubt been true for a very long time. Because smart menus are driven by JavaScript, it is more likely there will be visible effects. Smart menus mostly are intended to help with sub menus, especially with arrows showing, when the right most menu items won’t fit with submenus, which are switched to display to the left instead of overflowing to the right.

I’m not sure if there is any way to easily add CSS to change behavior with and without smart menus. I haven’t looked closely, but it also seems the space for the hidden arrows is caused by a display:none rule for the arrows. Perhaps a rule with width:0 could be added as well?

[hkp]

@Weaver

As above, I found that some SmartMenu issues were resolved when going back to Weaver 4, but all my testing was  on WP-6.1.1, so any results and interpretations need to be taken with a pinch of salt…..

You are also confirming what I found, that different browsers displayed the spacing issue differently.

My normal browser is Firefox, which by chance is the most extreme in showing unequal spacing and the shifting/bouncing of the menu bar, while Edge is the the least affected by it.

After @Scrambler’s January 29 reply above, I finally settled on ‘SmartMenus : ON’ and ‘Arrows : Hidden’ and the following Custom CSS:

.is-menu-desktop .wvrx-menu.sm .has-submenu {padding-right:.7em;}
.wvrx-menu a {margin-left: 0em; margin-right: 0em; padding-left: 0.50em; padding-right: 0.7em;}

Thanks again for all your help!

[scrambler]

@weaver, the fix right now I implemented is to add a rule to reset the right margin to the proper value when there is no arrow.

[scrambler]

@weaver

I think I found part of the problem.

I was not able to reproduce the problem until I used the option to add “desktop Menu Spacing”

When I have nothing in that box and I hide the arrow, all is good.

But if I have a value in that box, and I hide the arrow, the value in the @media padding right rule for the menu link with a sub menu is not adjusted to match the value for the right padding of the menu items without a sub menu.

 

[hkp]

FYI, our “Desktop Menu Spacing” options have nothing in the boxes.

[scrambler]

My test was on regular menu, not smart

[Author]

Posts