nav-secondary non sticky on mobile devices + some help in turning it to dropdown

[pix77]

Hi,
if you visit the website I’m currently working on you can see the secondary menu is sticky on desktop browser but not if you are on a tablet or a smartphone.
How can I make it always sticky?

Reading some forum posts I’ve found that converting secondary menu to dropdown when on mobile (like the main menu does) it’s too time consuming for you in this support service.
I understand that, but could you please leave me some hints on how I could do it myself?

Thanks
Paolo

---

Template Version: 7.4.0

[Support2]

Hello Paolo, thanks for your purchase.

The options you are trying not works on the data-plugin-sticky (works only for the header sticky).

For the data-plugin-sticky you have onlye two options:

PluginSticky.defaults = {
		minWidth: 991,
		activeClass: 'sticky-active'
	};

In your case the default option “minWidth” are being applyed and beacuse of that it´s not stick on mobile. Try changing your nav-secondary code to:

<aside class="nav-secondary" id="navSecondary" data-plugin-sticky data-plugin-options="{'minWidth': 0}">

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[pix77]

Thank you very much Rodrigo, now it sticks as it should (of course I also had to set the padding from top, otherwise it would remain hidden by the main menu).

Regarding the secondary menù on mobile devices I managed a workaround: using CSS min-width and max-width I hide the secondari menu and show a button instead. This button opens a modal popup containing the menu items organised with accordions.
More than enough for what i needed.

Thanks again,
Paolo.

---

[Support2]

Hello Paolo,

Great!

If you need further assistance, feel free to contact us.

Kind Regards,

Rodrigo.

---

[Author]

Posts