- This topic has 13 replies, 3 voices, and was last updated 2 years, 5 months ago by
.
Hello,
I have discovered that I had a layout issue with the “:after” attributes (icons) on mobile/responsive menu on my site. The desktop layout seems unaffected but the mobile layout has gone wrong where the menu expanding arrow was rendered behind the text (e.g. HOME + SHOP menus have submenu’s which could not be expanded because each title is also linked to a page, so with the arrow hidden behind the text, the sub-menu could not be expanded. The menu was OK before, but I did not notice if this change occurred due to a theme or plugin updates.
I have disabled most plugin’s one by one including the caching plugin I use, but none appear to be causing this issue.
I have traced the arrow down to: “.sh-nav-mobile li.menu-item-has-children > a:after” attribute but the fix I have attempted is not ideal, as I could only get the arrow to display below the heading text.
I did attempt to use the code you had previously cited, but it did not work for me.
My current temporary fix is:
.sh-nav-mobile li.menu-item-has-children > a:after {
display: table !important;
}P.S. removing the !important tag does not apply the fix, which implies that come CSS in the theme is causing this effect?
This temp. solution places the arrow below the menu heading (see screenshot), but because both the arrow and heading are links, and because they are close together users are likely to press the wrong button and get frustrated, which I want to avoid! Ideally I would like to have the sub-menu arrow display in-line on the opposite side (like it used to be and like it is on desktop), also like this solution >> https://support.shufflehound.com/forums/topic/issue-with-the-mobile-menu/
I would appreciate it fi you can check the theme’s CSS code to see if this can be fixed in the next theme update, so I don’t have to rely on custom CSS to fix. Alternatively, I would appreciate feedback on how to place the arrow in-line but on the opposite side of the of the menu for mobile devices.
Many thanks in advance.
Hi @ftahumour,
Sorry to hear about the problem you are having.
I could confirm the issue on my test site, therefore, I notified the theme developer about this so that it will be fixed.
The issue will be fixed ASAP.
In the meantime, you can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Jevelin -> Theme Settings -> Custom CSS/JS -> CSS Code
.sh-nav-mobile li.menu-item-has-children > a:after { float: right; }Best regards,
Shufflehound teamHello,
thank for for the prompt response. I did try that attribute but it did not work for me when I did it, perhaps a syntax error on my part. Thanks!
I would also like to point out that some other display elements have also been affected, possibly at the same time, or not.
In the Theme options under General >>Jevelin Style>> Style 2
The Basket button in this style has been moved to an odd location (middle of frame and over the separator). See attached example image.
I do not believe this is the standard location for this element. In my case I have had to switch to a different style for now, as I do not have the time or wish to fix this issue with CSS in the short term. Can you please also pass this over to be reviewed.
Thanks.
I don’t see the issue on my website as shown in the attached screenshots.
Could you please share the page URL from your site where it is happening so that I can troubleshoot it?
Hello, the URL is as provided previously, but I have changed the styles to avoid this issue in the short term as it is a live site.
If required, I can provide access to back end so you can change to style 2, then test and then change back.
Regards
George
Hi there,
We could confirm this issue and we will include it in the next weeks update.
Thank you for letting us know about this issue.
Best regards,
Shufflehound team
Great thank you for this.
I will remember to test this type of core usability functionality following Theme updates in the future as the mobile nav issue went unnoticed for a couple of weeks which did result in sales plummeting.
Regards
George
We are sorry for that.
Here is the new beta update, which should fix this issue:
Thanks. Now the CSS is in place, I will wait for the full release of the theme update to rectify and perhaps check the Tickets board for any other surprises ;O before I commit 😛
Nice to hear that the issue is fixed! 🙂
Hello,
I just updated the theme to the latest official version (5.2.1) in which the fix to the previously reported issue here should have been resolved (?) but after removing the custom CSS string and flushing all cache (wp-rocket, cloudflare + test browsers), then testing the Mobile NAV menu I am once again facing the same issue.
I was under the impression a permanent fix was going to be released with the next official theme update?
I don’t wish to keep adding and maintaining CSS code to fix bugs, ok for customizations but bugs should be addressed within the theme, please.
Regards
George
P.S. I am adding the CSS fix back to my site as its live and needs to be functional. If you choose to view it after I make the change, obviously the issue will not be present.
Hi there,
The latest version fixes this issue. We just inspected your website and by manually removing this custom CSS the menu was still working fine for us.
Best regards,
Shufflehound team
Hello,
I was seeing something different on my end.
Will remove the CSS and test again.
Regards
George
Sure, let us know how it goes. 🙂
