Folder within Folder

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