stanhillalsim3

• Ideally, I would like the tabs to act more like an accordion specifically for mobile users. This means when one tab is opened, it should expand its content directly underneath, while the other tabs remain easily accessible for selection without the user needing to scroll back up.
• This accordion-like behavior would allow users to smoothly transition between different tabs’ content, enhancing the overall mobile navigation experience.

Hello again,

I’d like to provide an additional observation related to the issue I’m experiencing with the Simple Menu widget on mobile devices.

New Discovery: Upon further examination, it seems that the element containing the text might be overlapping the dropdown icon. I noticed this when I zoomed in on the mobile view and found that the dropdown menus worked correctly every time I did so.

Potential Cause: This behavior leads me to suspect that the issue might be related to the z-index of the dropdown icon/element.

Request for CSS Code:

• Could you provide some custom CSS that adjusts the z-index of the dropdown icon/element to ensure it is correctly layered and accessible on mobile devices?
• Any guidance on the specific code or steps to implement this would be greatly appreciated.

I believe this adjustment might resolve the issue and ensure that the dropdowns function properly on mobile devices.

Thank you once again for your assistance and attention to this matter. Looking forward to your advice on this.

Best regards

Update – I notice this is also an issue when using the Advanced Menu too.

Hello,

Just a quick note to express my gratitude for the swift action on the EA CTA background image feature. It’s fantastic to see such responsiveness from your team.

I’ve decided to wait for the official release for stability reasons and will use the CSS workaround in the meantime.

Kudos to your team for the excellent support. Looking forward to the stable release.

Best regards

You can see what i mean on this page https://devtest631391.alsim.co.uk/

If you change the view mode to mobile and go to the “What we do section”

Hi, thank you for your response.

Unfortunately, this doesn’t seem to be working. I have put the CSS code in but it image is remaining centre centre.

Perfect, I cant believe I didn’t realise this was such a simple answer haha. thanks again.

Hello,

Firstly, thank you for your prompt response and the suggestion provided. I appreciate your effort in helping me address this issue.

However, the solution involving the use of an anchor HTML tag in the accordion title doesn’t fully resolve my challenge. The primary reason is that the widget is intended for mobile use, where right-click functionality isn’t available.

To clarify further, I am looking for a solution where:

1. First Touch Interaction: When a user taps on a menu item (e.g., ‘Products’), it should expand the accordion to show the submenu items.
2. Second Touch Interaction: Upon a second tap on the same menu item (‘Products’), I would like it to function as a clickable link, leading to the respective page.
3. Usability Aspect: It’s crucial that users can still expand and collapse the accordion tabs using the arrow, ensuring a smooth and intuitive mobile navigation experience.

I understand this might be a bit more complex, but this functionality is key to the user experience I’m aiming for. If you have any further suggestions or a different approach that could work in this scenario, I would be very grateful to hear them.

Thank you once again for your time and assistance.

Best regards,

Hi,

that’s fine, no need for apologies.

I have already done that as you can see in this picture – https://ibb.co/JvjxFc0

I agree that the native blue background ( the one that’s applying to all the others) is hiding behind my styled one.

I have a workaround that I have tried on other pages. I have made the native background colour invisible and applied icon style to each feature. Bit annoying but it seems to solve the problem.

I have fixed this issue with some CSS

.connector.connector-mobile   {
    right:calc(100% - 60px)!important;
    
}

Thank you for the response.

I may not have explained myself correctly as that’s not my issue.

There is a pixelated bordered around the icons I have choose to style. You can see that here. https://ibb.co/6sdy0Tk