I will give some simple code to create Folder within Folder.
#1. Suppose we have a Folder Sections with items: Testimonials, list carousel, 3d carousel, gallery…
We need to create a folder within Testimonials, list carousel.
#2. Edit Site Footer
Add 2 Text Blocks
something like this
#3. Use this tool to find the ID of 2 Text Blocks.
In my example, we will have:
- Testimonials: #block-9db6127131ff6ca96f27
- List carousel: #block-d0631acca646a3cf9960
#4. Find the ID of 2 Folder Testimonials, list carousel in the Navigation Menu.
We will have
- Sections: div.header-nav-item:nth-child(6)
- Testimoinals: div.header-nav-item:nth-child(6) div.header-nav-folder-content>div:nth-child(1)
- List carousel: div.header-nav-item:nth-child(6) div.header-nav-folder-content>div:nth-child(2)
#5. Use this code to Code Injection Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // testimonials $('#block-9db6127131ff6ca96f27').appendTo('div.header-nav-item:nth-child(6) div.header-nav-folder-content>div:nth-child(1)'); // list carousel $('#block-d0631acca646a3cf9960').appendTo('div.header-nav-item:nth-child(6) div.header-nav-folder-content>div:nth-child(2)'); }); </script> <style> div.header-nav-item--folder .html-block { position: absolute; background-color: #3308f6; right: -167px; padding-left: 17px; width: 150px; top: 0px; display: none; } div.header-nav-item--folder a:hover + .html-block { display: block; }</style>
#6. Result
When hovering on the Testimonials link.
When hover on list carousel