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

[miamax]

When refeshing any page on my site, the horizontal menu (under the header) shifts to the right and then quickly shifts back.

This also happens when clicking on any link that takes the user to another page on my site.

Home » Dwell In The Garden

Is there a CSS code I need to apply?

Thank you.

[scrambler]

I don’t know what you did to your site again, but I am seeing a zoomed in mobile view on desktop with the hamburger menu….

Basically your site thinks it is on a phone, when on desktop, so something is wrong / broken

I have no idea if this is related, but in the browser developer tools I see a console error

Failed to load resource: the server responded with a status of 406 ()

https://dwellinthegarden.com/wp-json/wp-statistics/v2/hit?wp_statistics_hit_rest=yes&exclusion_match=yes&exclusion_reason=CrawlerDetect&track_all=1&current_page_type=home&current_page_id=2270&search_query&page_uri=Lw=&referred=https%3A%2F%2Fdwellinthegarden.com%2F&_=1675196678916

@weaver, any idea what can cause a site to open on desktop as on phone (showing is-phone class on the body tag)?

[scrambler]

If you are seeing the same as I do (mobile site on desktop), I would try to deactivate ALL non weaver plugins, and see if the issue goes away.

If it does reactivate one by one to find the culprit.

Also, are you using any Optimization plugin (js and or CSS)?

If so definitely deactivate that as they are known to break the theme which is already optimized

[miamax]

So strange. I logged out and looked at the site in Firefox and Chrome. I do not see what you must be seeing.

I deactivated all non-Weaver plugins with the exception of Tablepress.

Would you please tell me if you see the same problem with my site?

 

[scrambler]

It is working now, and I see the shift you mention. I will do some test on my side see if I can reproduce the issue.

Did you check if you are you using any Optimization plugin (js and or CSS) or plugin optimizing option?

[miamax]

WP Rocket and Yoast SEO.

 

I reactivated the rest of the plugins with the exception of these two.

 

Is my site still working properly?

[scrambler]

Regarding your menu shift, it may be coming from the refresh of the side scrollbar.

To verify that, create two test pages with no content. Then add these two test pages to your menu bar.

Then, verify that when you go to these pages there is no scroll bar on the right.

If so, play with switching between the two test pages from the menu bar, and see if you still have the horizontal shift and report your findings.

ALSO. I see you have hidden the arrow from the sub menus, but I am not sure if you did that the right way.
Please verify that you have checked the option “Hide arrows” in the theme Menu options!

[miamax]

 

I added the two test pages. Refreshing each one still causes the menu to shift, but only the links that have enough content for a scroll bar.

How can we overcome the shifting of those pages?

 

I verified that the “Hide Arrows” had indeed been checked previous to this in the theme Menu options.

 

Do you think that WP Rocket and/or Yoast SEO were/are the conflict, causing the site to look as if it were on a mobile phone?

 

[scrambler]

That would confirm the arrow is the issue, but not sure why I don’t have the problem and you do.

I have a CSS rule that will solve the issue, but right now your site is broken again, displaying as on phone while on desktop.

So if you have reactivated your plugins that would confirm one of your plugins is breaking the theme.

If I see it, you should be able to see it too on a different (not logged in computer). And if you can see it, you need to reactivate plugins one by one to find the culprit.

Once we solve that, I can verify the CSS rule to fix the shift problem.

[scrambler]

Site still messed up

[miamax]

I checked my site on another computer in 4 different browsers: Firefox, Chrome, Edge, and Avast. I am not seeing what you are describing. Is this what you see on your desktop?

 

Would you please tell me the browser you are using to see this?

 

P.S. This is a screen cap from my phone.

 

 

 

 

[miamax]

I have disabled all plugins again, so the site should be fine (hopefully) but since I cannot see what you are seeing, I can’t activate each plugin to see what’s causing the site to be messed up.

I have only 11 deactivated plugins. Perhaps I could activate half of them and you could let me know if the site looks okay. Then I will know that the problem is with the other half of the plugins. Would that be alright?

 

[scrambler]

The site works now.

Check if placing the rule below in the theme Global Custom CSS rule box solves the shifting

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

As for testing, we can proceed as you mention, deactivate half, post back and I will tell you, then you keep deactivating half of the batch that has the issue and so on.

But have you tried accessing your site from a different computer after clearing ALL caches?

[miamax]

I placed the CSS rule as you indicated and that does not solve the shifting.

I have indeed accessed the site from a different computer after clearing all caches.

Eleven plugins were deactivated and I have activated 6 of those plugins.

Please let me know if the site is still working properly.

 

 

[scrambler]

Site looks ok

I need you to leave the CSS rule I gave you in place so I can see what it does

[miamax]

Okay.

I have activated 3 more plugins.

[Author]

Posts