Mobile Nav Menu Assistance

Home Forums Jevelin Theme Mobile Nav Menu Assistance

Home Forums Jevelin Theme Mobile Nav Menu Assistance

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • 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.

     

    Attachments:
    You must be logged in to view attached files.

    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 team

    Hello,

    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.

     

     

    Attachments:
    You must be logged in to view attached files.

    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?

     

    Attachments:
    You must be logged in to view attached files.

    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:


    Please login to access this file

    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! 🙂

Viewing 10 posts - 1 through 10 (of 10 total)