- This topic has 10 replies, 3 voices, and was last updated 3 years, 6 months ago by
David.
-
AuthorPosts
-
February 24, 2022 at 1:38 pm #2132481
andrachans
Hello there,
Can you please point me towards any article that can assist me with replicating the design and functionality of the left sidebar menu, on the demo website link below.
Thank you.
Kallad
February 24, 2022 at 2:52 pm #2132540Ying
StaffCustomer SupportDo you mean a sticky sidebar on desktop?
This can be achieved using some CSS, something like this:
.inside-left-sidebar { position: sticky; top: 0; }
On smaller screen it hides or shows by clicking a button, this will require some custom development with JavaScript.
February 24, 2022 at 3:08 pm #2132558andrachans
Thank you Ying,
No, what I am after is: when I click on a category menu item, that the category menu stays open, and allows me to view all sub category menu items.
So that, when clicking through the sub category menu items, the category menu item always remains open.
For example: when you click on “ELEMENTS” category menu item (in the demo website link below), you will then view 5 sub category items. When you click on one of the sub category items, for example “Tabs Widget”, the category menu item “ELEMENTS” always remains open.
The category menu item “ELEMENTS” will only close when you click on another category item, for example “CONTENT”. “CONTENT” will then display all sub category menu items, allowing you to click through each one until closing the “CONTENT” category menu item.
I hope I explain myself better this time.
Thank you.
February 24, 2022 at 5:27 pm #2132642Ying
StaffCustomer SupportCheck the example 7 here:
https://docs.generatepress.com/article/header-examples/#example-7Is it what you are looking for?
February 25, 2022 at 4:00 am #2133112andrachans
Hello there,
No, this is not what I am after.
I am wanting to know if you can help me with the functionality only, not where or, how to position the menu on my website.
Maybe I should have started with this: “After I have positioned the main navigation menu in the left sidebar…’Can you please point me towards any article that can assist me with replicating the design and functionality of the left sidebar menu, on the demo website link below.’ ”
Thank you.
February 25, 2022 at 4:18 am #2133132David
StaffCustomer SupportHi there,
are you using the Primary Navigation or Secondary Navigation in your sidebar ?
February 25, 2022 at 4:46 am #2133165andrachans
Hello David
I will be using the Primary Navigation menu.
I am wanting to build a documentation website.
I need related articles (sub menu items) to fall under the relevant topic (a menu item) on the Primary Navigation menu – and I also need the relevant topic (menu item) to remain open to allow a person to read one article after the other (moving from one sub menu item to the next), without needing to navigate back and forth.
February 25, 2022 at 5:32 am #2133207David
StaffCustomer SupportI need related articles (sub menu items) to fall under the relevant topic (a menu item) on the Primary Navigation menu
That isn’t something the Theme can do. There are some snippets out there like this one:
https://www.isitwp.com/auto-add-subpages-to-menus/
Which will automatically add any Child Pages to its Parent page in the menu. So if you use Parent/Child Pages hierarchy then that should work.
and I also need the relevant topic (menu item) to remain open to allow a person to read one article after the other (moving from one sub menu item to the next)
To keep the current Sub Menu open can be done using some Javascript.
1. Create a new Hook Element.
https://docs.generatepress.com/article/hooks-element-overview/2. Add this Script to the element text area:
<script> var sideNav = document.querySelector('.gen-sidebar-nav'); var cma = sideNav.querySelectorAll('.current-menu-ancestor'); var cmaChild = cma[0].querySelectorAll('.sub-menu'); cma[0].classList.add('sfHover'); cmaChild[0].classList.add('toggled-on'); </script>
3. Set the Hook to:
wp_footer
4. Set the Display Rules to
Entire Site
For it to work correctly you should set the Customizer > Layout > Primary Navigation –> Navigation Dropdown to:
Click - Arrow
February 25, 2022 at 5:44 am #2133221andrachans
Thank you David.
February 25, 2022 at 5:45 am #2133224andrachans
.
February 25, 2022 at 6:02 am #2133248David
StaffCustomer SupportYou’re welcome!
-
AuthorPosts
- You must be logged in to reply to this topic.