Horizontal Menu (under the header) Shifts to the Right and Then Back

[scrambler]

Actually, do not put the CSS rule, but remove the value you added in the menu option “desktop menu spacing”

[scrambler]

Site still appears OK with the 3 more plugins

[scrambler]

And regarding the menu shift problem when arrows are hidden, I believe I have a fix (@weaver, this also applies to the other thread we have been discussing).

• Make sure the arrows are hidden with the menu option.
• Make sure there is NO value in the box of the “desktop menu spacing” option.
• Then to increase the space between menu items, add the rule below to the Theme Global Custom CSS rule box with the value you like

@media( min-width:768px) {
.menu-primary .wvrx-menu-container li a {padding-right:1em; padding-left:1em;}
.menu-primary .menu-hover.menu-arrows .has-submenu > a {padding-right:1em; padding-left:1em;}
}

This has the added benefit of increasing both left and right padding the same way.

And if does not work for you, please leave the rule in place so I can check it out

[scrambler]

@miamax Site is broken again

 

[miamax]

I had not done anything and the 3 plugins I recently activated were okay, but the site is now broken again.

[miamax]

I will make the adjustments you suggest.

[miamax]

There was a value in one of the desktop menu spacing boxes. I removed it and I see that seems to have fixed the shifting.

 

When I add the CSS and change the values to give a 10em value to the sub menu left padding, I do not see that the sub menu indents a bit under the main horizontal menu.

 

Is the site still broken?

[scrambler]

Yes the site is still broken.

The CSS I gave you only aplies to main menu items, not sub menus

Have you investigated the error that is in the console with your Provider?
If you deactivate all plugins again and the site works again, I could check if that error message goes away, which would tell us if it is related to the problem.

The two most likely culprits are broken JS / CSS or caching so:

1. Have you checked if any of your plugin is doing CSS and or JS optimization? This would be the first likely culprit that would break the theme Javascript and CSS.
2. Do you have any cache plugin or service (like cloudflare). If so deactivate that and clear the cache so we can see if this is the issue.
3. Last one I forgot to mention, is are you using a Child theme?

If so we can try to deactivate that to see if it is the cause

EDIT, today, the site is broken on EDGE but not on Chrome. Can you test on EDGE?

But the sidebar on the home page is empty……

[miamax]

I noticed the CSS code has “submenu” and I thought that applied to the submenu. I see no difference in padding in the horizontal menu, maybe I don’t need this code?

The reason I removed the sidebar on the home page was to be able to test the shifting with the test pages 1 & 2. With the sidebar menu on those test pages, there was a scrollbar on the right, and we were testing pages without the scrollbar.

I have deactivated the 3 plugins. Please check now to see if the site is okay.

[miamax]

I am checking on Edge.

 

[miamax]

I am not using a child theme, just Weaver Xtreme v. 5.0.7.

[miamax]

The plugins I had re-activated and now deactivated are:

Really Simple SSL

Simple Custom CSS and JS

WP Rocket

 

You are probably correct about that CSS plugin.

 

I do not have a cache plugin.

 

[scrambler]

 

1. Site still broken on Edge with the console error message
2. Site working on Chrome without the error message in the console
3. I do not see the CSS rules I gave you to increase spacing being active.

• • If you removed them, please put them back paying attention to the syntax.
  • If you have them in the CSS rule box, the custom CSS may be broken. Please paste the whole content of the theme Global Custom CSS Box here for review

[scrambler]

And you can change the sub menu left padding with the rule below

.wvrx-menu .sub-menu a {padding-left: 2em;}

[miamax]

#site-generator {display:none; }
#site-info {display:none;}
.entry-meta {display:none;}
.entry-utility {display:none;}

#content .page {background-color:#ffffff; padding:5px;
.post {background-color:#ffffff; padding:5px;
border: 1px solid #000000; margin: -5px 0px 10px -20px;}

.home .sticky, #entry-author-info {
background-color: #FFFFFF;
margin-right:5px; margin-left:1px;
}

.widget-title {margin-bottom:10px;}

.one#colophon .widget-in-footer {margin:0px;}
#footer-widget-area .widget-1 {padding-left:0px;}

.add_filter( ‘jetpack_enable_opengraph’, ‘__return_false’, 99 );

.category-title-label {display:none;}

@media( min-width:768px) {
.menu-primary .wvrx-menu-container li a {padding-right:1em; padding-left:1em;}
.menu-primary .menu-hover.menu-arrows .has-submenu > a {padding-right:1em; padding-left:1em;}
}

.wvrx-menu .sub-menu a {padding-left: 2em;}

[miamax]

Looking at the site on another computer, it looks okay in Edge and Chrome (cache cleared on both browsers).

[Author]

Posts