-
Sorry if this topic has already been explained. I tried to find the answer in the forum, but could not see the solution I was looking for.
I am developing an RTL language website (it is in Persian):
https://staging.safeactivism.org/The menu works fine on the desktop, but when I switch to the mobile version, the second main menu appears to stack under the first, with indentation. That, in turn, indents the second sub-menu for mobile viewers.
How can I get rid of this indentation?
Many thanks
-
Hi there,
It’s because you have this custom CSS on your site:
.menu-item-596 { margin-inline: 2rem; }If you want to apply it to desktop only, try changing it to:
.main-navigation:not(#generate-slideout-menu) .menu-item-596 { margin-inline: 2rem; } -
Thank you so much!
I really appreciate the help.
Best -
You are welcome 🙂
-
Hi Ying,
Although the previous problem has been solved, I am now facing a new one.
On the front page (https://safeactivism.org/), I inserted a hero section using the “block element” feature. However, when attempting to open the menu using an Incognito window on an Android phone, the menu fails to open. Instead, it pushes the layout to the bottom of the page, resulting in a square white space.
This does not happen on other pages where the “block Element” hook does not exist.
Is there a fix for this?
Many thanks in advance. -
Hi there,
Block element – page hero has nothing to do with the menu, it will not affect the menu in every possible way.
Can you disable your cache plugin to test?
-
Thank you, Ying.
So I disabled two plugins: 1) performance lab, which is a plugin developed by WordPress itself and contains several modules, and 2) Litespeed Cache.
The problem is now solved ! ( THANK YOU!)
But I am still wondering which one of these plugins were the culprit.
Many thanks
-
Glad to hear that 🙂
Now activate them one at a time to see which one is causing the issue.
- You must be logged in to reply to this topic.