Hey there!
1. Thank you for the nice comment!
2. Well, in order to have the style you showed on the picture, you would need to pick the “Classic” theme.
The hamburger like menu in the free version can only be changed using the built-in hooks. In this case the demo was showing the one from Font Awesome:
There are two icons to be customized, one to expand, and one to collapse:
Please add this to your theme’s functions.php (if you go the Font Awesome way, you need to make sure your theme comes with it, otherwise you would need to load the FA stylesheet.)
//Expand icon using Using Font Awesome
add_filter('joli_toc_expand_str', function(){ return '<i class="fa fa-bars"></i>';});
//Collapse icon
add_filter('joli_toc_collapse_str', function(){ return '<i class="fa fa-close"></i>';});
Just replace the fa-bars or fa-close classes with any font awesome icon.
Alternately, without using font awesome you can just use plain text or custom HTML like so (you could even create your own sandwich menu with pure CSS):
//Expand icon
add_filter('joli_toc_expand_str', function(){ return '[INSERT TEXT/HTML HERE]';});
//Collapse icon
add_filter('joli_toc_collapse_str', function(){ return '[INSERT TEXT/HTML HERE]';});
Some colors can be adjusted in the Appearance panel, or overridden with custom CSS.
3. Spacing can be set in Settings > Appearance > Headings height. Set a height in pixels from here.
Please let me know if you can get expected results!
Cheers!
