Problem/Motivation

Testing this Drupal 9 theme that I bought: https://demo.morethanthemes.com/flashyplus-business/default/landing-page-2 on mobile with Drupal 9.5.5 . It uses the Superfish Module Version: 8.x-1.4. If you reload the page (or any of the pages in the demo link) it inadvertently shows the desktop menu for a few seconds before showing the correct mobile accordion menu. I'd like the page to load without the desktop menu inadvertently showing.

Steps to reproduce

Open https://demo.morethanthemes.com/flashyplus-business/default/landing-page-2 specifically on mobile (cellphone) and reload page. You will see the desktop menu inadvertently flash for a second or 2 before hiding.
Thanks for any help. Much appreciated.

Proposed resolution

Adjust the Superfish JS/CSS to rectify the issue. Issue appears to be with this JS file: https://demo.morethanthemes.com/flashyplus-business/default/sites/defaul...

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#11 3369876-11-Menu-display-issue-on-page-load.patch691 bytesakshay_d
#10 3369876-Menu-display-issue-on-page-load.patch659 bytesakshay_d
desktop-menu-shouldnt-show.png57.05 KBhcanning
superfish1.mp4281.96 KBhcanning

Issue fork superfish-3369876

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

hcanning created an issue. See original summary.

hcanning’s picture

hcanning commented

Theme vendor came back and suggested adding the below CSS in Drupal as a temp fix. May help someone else. Thanks

@media only screen and (max-width:767px) {
    #superfish-main {
        display: none;  
    }
}
ivnish’s picture

ivnish
he/him
commented

up

preeti.chawla’s picture

preeti.chawla commented
Status: Active » Needs work

I am working on it

ivnish’s picture

ivnish
he/him
commented
Status: Needs work » Active

Please don't change issue status if patch is not ready

lobsterr’s picture

lobsterr commented
Assigned: Unassigned » lobsterr
Related issues: +#2879040: sfSmallscreen loads the full menu first

lobsterr opened merge request !12

lobsterr’s picture

lobsterr commented
Status: Active » Needs review
lobsterr’s picture

lobsterr commented
Status: Needs review » Needs work

Unfortunately, my approach will have a blinking side effect for normal resolutions.
I have an idea, to render accordeon or select menus for the small screens and show/hide them using media queries, but it will take a lot of time to implement and there could be potential bugs :(

akshay_d’s picture

akshay_d
Location Bangalore
commented
StatusFileSize
new 3369876-Menu-display-issue-on-page-load.patch659 bytes

I rerolled the patch with minor updates and provided it for the 8.x-1.x branch. It works with Drupal 10 instances.

Hope this helps someone.

akshay_d’s picture

akshay_d
Location Bangalore
commented
StatusFileSize
new 3369876-11-Menu-display-issue-on-page-load.patch691 bytes

Minor updated to the previous patch. Use this patch with latest 8.x.1.13.