Menu on small displays/iPads etc. not responsive

Thanks for using Modern Store!

I see what you mean. Please add this CSS to your site to flip the third tier menu to the left instead of the right:

.menu-primary ul ul ul {
	left: auto !important;
	right: 100%;
}
.menu-primary ul ul button {
	right: auto;
	left: 12px;
	z-index: 3;
	transform: rotate(90deg) !important;
}
.menu-primary ul ul button:hover {
	background: none !important;
}

The problem has been solved. Thanks a lot.
Unfortunately there’s a new one just came up. The arrow that signals a submenu is either out of the menu field (large browser-size) or right in the center of it (small display-size e.g. iPad).
Is it possible to fix it to the left (before the word “Schutzhüllen” but within the orange box)?

Here are pictures showing the problem:

https://goodtex.de/wp-content/uploads/2019/11/IMG_0AF8CF0F0257-1.jpeg

https://goodtex.de/wp-content/uploads/2019/11/Bildschirmfoto-2019-11-06-um-11.10.18.png

Thanks in advance for your help!!

• This reply was modified 5 years ago by fego94.

Is there a way you can link me to the site? I’m having trouble recreating this issue.

Unfortunately this is not possible since I’m building this site for a client and he protected the site with a password…

If it’s not possible for you solving the problem only with the picture, I’ll come back to you when the website is online. But this can take some weeks I guess.
Sorry for that.

Okay I understand.

I have the CSS added to my test site and working correctly right now, so without seeing the client’s site, I can’t know what’s different about their site that is causing the code to work improperly.

I think I’ll need to wait until a live version is available, but I have a slight variation you can try out in the meantime:

.menu-primary ul ul ul {
	left: auto !important;
	right: 100%;
}
.menu-primary ul ul button {
	right: auto !important;
	left: 12px !important;
	z-index: 3;
	transform: rotate(90deg) !important;
}
.menu-primary ul ul button:hover {
	background: none !important;
}

If there is some code from a plugin adjusting the icon’s placement, this might help to keep the arrow all the way to the left.

Hi Ben,

so far it worked with the improved css code. The arrow is still outside the orange box but the other bug is fixed so it looks very nice and appropriate.
When the clients site is online or I figured out other problems I’ll come back to you.

Till then a big thank you to you!! Love the ModernStore Theme

Sounds good! Thanks for the update.