[Support request] How to display widgets on mobile navigation/menu and sticky navigation

[Muhammad Jawad]

Hi. I am using GP sider theme for my blog at http://www.startbyzero.com

How can I make the widgets on the right header (such as ‘join the community sign-up’ box and search widget etc.) on the mobile menu?
Please note I tried using the off-canvas menu for this but that displays items in pretty-weird and improperly aligned manner.

Also, I am unable to see the sticky navigation even when enabled. Is it not compatible with Sider theme? If yes, how can I display some content on the sticky navigation such as a menu or some widgets?

[Elvin]

Hi,

Please note I tried using the off-canvas menu for this but that displays items in pretty-weird and improperly aligned manner.

Off-canvas menu is the most ideal one for this. Alignment can be fixed with CSS. 🙂

Also, I am unable to see the sticky navigation even when enabled. Is it not compatible with Sider theme?

To clarify: Did you mean the sticky navigation for mobile? if so, that is set on Appearance > Customize > Layout > Header.

By default, Sider has mobile header set to “on” there, but the sticky is set to “off”. To enable the sticky header for mobile, simply change the Sticky dropdown value to “on”.

[Muhammad Jawad]

Hi Elvin –
I understand what you have mentioned above about the ‘Skicky .> On/Off’ option in the Customize > Layout > Header section. But my question is not related to mobile sticky header.

My question is regarding the option ‘Sticky Navigation’ under Customize > Layout. How can I used that option? It makes no changes to the desktop or mobile appearance of my site if I switch it to on or keep it off. What is this Sticky Navigation for? How can I use it with Sider? And also what is the difference between Off-Canvas Navigation and Sticky Navigation?

Also regarding the ‘mobile sticky header’ option (the first paragraph above), how can I change the background color?

[Leo]

What is this Sticky Navigation for? How can I use it with Sider?

That option cannot be used with the Sider layout as the header is fixed to the left side by default.

You can see a demo of the sticky navigation here:
https://docs.generatepress.com/article/navigation-as-a-header/#sticky-navigation-with-height-transition

As for mobile, since you are using the mobile header option, you can try turning on the Sticky option underneath the mobile header option to see it in action:
https://docs.generatepress.com/article/mobile-header/#sticky

Then we can help with the CSS to change the color in sticky mode.

See more info on off canvas navigation here:
https://docs.generatepress.com/article/off-canvas-panel-overview/

[Author]

Posts