Hi Aigars,
Firstly, thank you so much for such a great theme.
I realize that menus with 3 tiers of depth are a usability problem (which is why bootstrap doesn’t support them), but I still needed the functionality (I link many twitter addresses in groups).
Anyway Looking through this post: https://colorlibsupport.com/t/child-theme-function-override/
And a few other bits on the forum I have a solution to supply a third level of depth in a child theme. For the most part the functionality is built into the theme. It just needs ot be unlocked and tweaked.
Firstly we need to override the sparkling_header_menu() function that is in /inc/extras.php in the Sparking theme.
Similar to the link above we need to copy that function from /inc/extras.phpinto the functions.php file in our child theme.
function sparkling_header_menu() {
// display the WordPress Custom Menu if available
wp_nav_menu(array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 3, // <--- This is the value you change from 2 -> 3
'container' => 'div',
'container_class' => 'collapse navbar-collapse navbar-ex1-collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
));
} /* end header menu */
Now this function will have problems overriding the extras.php file in the Sparkling theme. So you’ll have to add the conditional code noted in the link above (yes you will be modifying the parent theme – which is not ideal):
if ( ! function_exists( ‘sparkling_header_menu’ ) ) : ##function Goes here## endif;
## Aigars, could you add this conditional to theYou'll now have a working third level of depth in your menu. You wont be able to see it though since it;s not styled. Add this to thesparklin_menu_header()function like you have to other function in theextras.phpfile?
style.css in your child theme.
```
/* Make third tier visible */
ul.nav ul ul {
margin: -30px 0 0 100px;
background-color: #595959;
}
```
After this you'll be able to see the third level on the full desktop view of the menu.
We are still not done yet. The Small screen version of the menu will not show the third level.
For this I elected to use a plugin called Responsive menu by Peter Featherstone it understands 3 levels of menu just fine. The only issue is that the toggle button for the original menu will still try and show up.
In this case you’ll want to hide it in style.css:
/* Hides the responsive navbar-toggle button since it only supports 2 levels of depth */
.navbar-toggle {
visibility: hidden;
}
After this you should have a working 3-tiers of menu in Sparkling.
Note: I didn’t like the placement of the toggle for Responsive Menu so I overrode that by using the Custom CSS section in the Other tab in Theme options. This positions it a but nice.:
/* Better positioned the Responsive menu plugin's responsive menu button */
#click-menu .threeLines {
margin-top: 10px !important;
}