0

To prevent my Superfish Main Menu from stacking as screen size decreases - and thus obscuring the content below it, I set sf-Smallscreen to change the Superfish Main Menu to an accordion when the screen size scales down to 990px. This accommodates tablets in portrait orientation, for example.

Problem: When you scroll down on a tablet, the accordion "Button" reverts to the Desktop rendering of the Main Menu, "stacking up" because it's too wide for the narrow screen.

Scroll back up and the Desktop Main Menu is replaced by the accordion.

Question: How can make the accordion button persist when scrolling down on a tablet-sized screen?

0

I can't say for sure without seeing your code, but I wonder if this is maybe because you have some Javascript that does an add/remove class or changes the structure of the menu in order to make sticky nav items take up less space when you scroll. This symptom could only be caused by Javascript detecting the scroll behaviour, and as far as I know, Superfish does not have this feature natively (though I could be wrong, I am not overly experienced with this specific module).

If this is the case, right click and inspect code, then look for things that change dynamically on scroll. Any names of classes that are added might give you a clue as to which module is causing this. It does sound like a conflict, though, and not Superfish itself.

If that is not helpful, do you have a dev site up that we can take a look at?

Good luck!

| improve this answer | |
  • With your suggestion I found what was happening dynamically on scroll: It was the bootstrap breakpoint where the navbar collapses. I had to disable the Main Menu in my theme to stop the theme's menu from appearing. Then I experimented with diffferent settings in Superfish and increased the breakpoint to 990px. Now it behaves nicely on scroll on tablets and mobile phones and is hidden on desktops/laptops.Thanks! – Aaron Thain Aug 17 '16 at 19:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.