Archived topic
How to display widgets on mobile navigation/menu and sticky navigation
3 replies · Started by Muhammad Jawad on November 15, 2020
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?
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".
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?
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/
