My Account menu dropdown not working properly on mobile

[MrV63]

On mobile when you click the my account icon on the navigation menu near the cart button (see attached image), it opens the menu for a second but then the menu closes and it just goes to the my account dashboard instead of letting the user select something from the menu first.

This field is Private Content.

Attachments:

You must be logged in to view attached files.

[Aizaz Awan]

Hello, @mrv63,

To address this issue, please follow these steps:

Navigate to the Dashboard.
Proceed to “Porto.”
Access “Theme options.”
Select “Skins.”
Choose “Custom CSS.”
Paste the provided code at the bottom of the black box.
Save the settings.

To view the changes on your site, clear your browser cache and revisit your website.

@media(max-width:575px){
.wpb_custom_7f1500734455b1eeef6f72f11d417d71.account-dropdown > li.has-sub > a::after{position:absolute !important; z-index:999999999 !important; width:100% !important; height:100% !important;}]

Best Regards,
PThemes Team.

[MrV63]

That didn’t fix the issue (even after I fixed your last curly bracket). Something weird is going on where when you open the dropdown menu it instantly clicks the main menu link instead of letting you select something from the submenu links. I’ve tested this on actual phone and with browser developer tools set to mobile. It is even happening on the Main Menu in browser tools when set to mobile (browser width of 992px+ but still in mobile mode). On top of that the css is messed up with the My Account icon and chevron and the dropdown colors css (screenshot 1). I’ve set up my old header on one page to compare. The formatting seems fine (screenshot 2) although the menu error is still there. But the only difference between my old header and the new header is where the search bar is. I haven’t changed anything else that would mess up the css. Just to make sure some other conflict was happening, I disable all my plugins and backed up and deleted all my custom css in the Skins > Custom CSS page. I have no idea what’s going on. Hopefully you can help. The site is stripped down temporarily so you can take a look (it’s not a live site yet).

Current header is on all pages. Old header where the my account icon and menu css looks good is here:

test

Attachments:

You must be logged in to view attached files.

[MrV63]

Strangely the Icon and chevron magically started looking ok. They were squished next to the divider right before I took the screenshot 1 but now they are normal. I haven’t changed anything. Strange things happening because I don’t remember this menu thing happening before either. I also forgot to mention that I made a template from my original header and created a new header as a test. I loaded the old header template into a blank header and the menu looks screwed up there too even though it came from an exact copy of the header that looks good.

[Aizaz Awan]

Hello, @mrv63,

I understand. Let me explain.

The dropdown icon is inside the anchor tag for “My Account,” which also contains a link, as shown in this screenshot: https://postimg.cc/mhwRFkwM . This causes the link to open when you press the dropdown icon because it is inside the anchor tag. On mobile devices, there’s no hover feature; they interpret your finger tap as a click. This is why the link opens instead of the dropdown—it’s the default behavior on mobile devices and can’t be changed with theme settings or custom CSS.

As an alternative, you can remove the dropdown icon on mobile devices only by using the custom CSS code below:

.wpb_custom_7f1500734455b1eeef6f72f11d417d71.account-dropdown > li.has-sub > a::after {
    display: none !important;
}

I hope this clarifies things for you.

Best Regards,
PThemes Team.

[MrV63]

I tried that CSS code but it doesn’t fix the problem. It just removes the chevron and doesn’t keep the menu open. It immediately goes to the Dashboard page when I click the icon. I guess I’m really confused now as to why a feature that’s known not to work on mobile be implemented into the mobile design of your theme? I didn’t add that. It was part of the theme that I purchased. And just to be clear the dropdown does open. It just doesn’t let you use it.

• This reply was modified 1 year, 8 months ago by MrV63.

[MrV63]

There must be some css or javascript that can be implemented to remove the hover effect or something similar at mobile resolutions: @media(max-width: 991px)

[MrV63]

Upon further inspection, the My Account icon is the same link as the first item in the dropdown (Dashboard). Maybe there is a way to make the icon not be a link to Dashboard but instead be a link just to open the dropdown menu?

• This reply was modified 1 year, 8 months ago by MrV63.

[Aizaz Awan]

Hello, @mrv63,

I understand your concern. However, some features are specifically designed for desktop use and not for mobile devices. As I explained in detail, the hover feature cannot be changed for mobile using CSS code. I hope you understand this.

As an alternative, I provided CSS code to hide the icon for the dropdown menu that uses the hover function, allowing users to navigate to the user dashboard easily. Unfortunately, there are no other options available in the theme settings I mentioned.

If you still want to customize further, you can contact our customization team at https://www.portotheme.com/customization/ for additional assistance.

Thank you for your understanding.

Best Regards,
PThemes Team.

[MrV63]

I finally figured out on my own to get rid of the my account dropdown menu for touch devices. I’m just posting my results here if anyone else is trying to remove a broken menu that shouldn’t even be part of the theme to begin with. Here is the CSS:

@media(max-width:991px){.wpb_custom_7f1500734455b1eeef6f72f11d417d71.account-dropdown > li.has-sub > a::after {
display: none !important;
}}

@media(max-width:991px){#header .porto-narrow-sub-menu {
display: none !important;
}}

• This reply was modified 1 year, 8 months ago by MrV63.

[Aizaz Awan]

Hello, @mrv63,

That’s great to hear you managed to solve the issue! Thanks for sharing your solution. This will definitely be helpful for others facing the same problem.

Here’s a small suggestion for making your CSS a bit more concise by combining the media queries:

@media(max-width:991px) {
    .wpb_custom_7f1500734455b1eeef6f72f11d417d71.account-dropdown > li.has-sub > a::after {
        display: none !important;
    }
    #header .porto-narrow-sub-menu {
        display: none !important;
    }
}

This way, you avoid repeating the @media rule and keep your CSS more organized. Thanks again for sharing!

Feel free to write back to us anytime, we are always here to help you.

Thanks for contacting us.
Have a nice day.

Best Regards,
PThemes Team.

[MrV63]

Thanks for that suggestion! I do need any tips I can get as I’m not the best with CSS but I am learning and things like that definitely help.

[Aizaz Awan]

Hello, @mrv63,

You’re welcome! I’m glad to hear that the suggestion was helpful. Learning CSS can be challenging, but with practice, you’ll definitely improve. If you have any more questions or need further tips, feel free to ask. Keep up the great work!

Have a nice day.

Best Regards,
PThemes Team.

[Author]

Posts