Child theme menu override in functions.php + adding a third level of menu depth.

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:

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
                    '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 the sparklin_menu_header() function like you have to other function in the extras.php file?
You'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 the 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;

Thank you for posting it here! Very nice tutorials! Will use it as reference for others looking to add 3rd tier for menu.

I have already made necessary changes to Parent Theme and I have pushed it to Github. It will take a little while before it becomes available via Here you can find it on Github:

So at first? sorry for my poor English.
Thank you for beautiful themes. They are awesome.
For my project I decide to take Dazzling theme. So I take it and make some changes what were typed at this article. Everything is ok, I got menu with 3 tiers, but I can’t put caret (its drop-down arrow near menu item if I don’t make any mistakes) near first sub-menu that has children. Please help me to do it.
And one more: Can it be not down arrow? I need right arrow.
Here it is my site:

Here I’m lost. When I add one tier it shows up and works BUT I can’t klick back to the 0 tier (the main page). When I add tier no 2, 3, and 4 only tier no 1 shows upp, the others aren’t visible. And it’s impossible to open tier no 0. What is the solution?

From time to time I get the following message. Is it due to dazzling or WordPress?

It says: Are you shure you want to do this?

Hi Aigars,

Firstly, thank you so much for such a great theme.

And thanks to all contributors for their hints and tips for the dropdown navigation 3rd level.

I’m only lost at one point:

Where (in which file) do I have to enter this piece of code:

if ( ! function_exists( 'sparkling_header_menu' ) ) : ##function Goes here## endif;

Thank you veryx much in advance for a quick reply.
Have a nice day and best regards


Please read tutorials again. That part had to be done in Parent Theme and if you have the latest version installed you shouldn’t worry about it. Just skip that part.

OK - I’m stuck. I’m using the Sparkling theme with a child. I’ve added the sparkling_header_menu to functions.php and made the changes to the CSS. I see the 3rd level menu items in the page source code, but cannot make them appear visible. Also the 2nd tier doesn’t have a carat or other indicator of third level. What’s the best approach to run this down?

Got it! I used the method described here: and it works beautifully!

I just tried to make a third level within my top menu on my site (using the Sparkling theme) and it worked on desktop just fine, but not on mobile/small screens. Is that expected or should it be working on mobile/small screens too?

I followed this tutorial:

@morekitsch, @aigars, @movin,

I’ve done what you’ve instructed - thanks for all your help! One problem came out though - why is my 3rd tier menu in grey background instead of the original white? Image attached.

Website can also be found on

Many thanks,

Hi Isabel,

This is because the below CSS code shared here is for Sparkling theme

/* Make third tier visible */
ul.nav ul ul {
margin: -30px 0 0 100px;
background-color: #595959;

but you are using Activello theme on your site so try using following CSS code instead of above.

ul.nav ul ul {
    margin: -40px 0 0 155px;
    border-radius: 00;

Best Regards,

Hi Movin,

Thank you! Fixed it. My third tier shows well, except for the fact that the background is transparent. Correct me if I’m wrong, but the code for the menu is as follow:

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #fff;
background-color: #ffffff;
.navbar-collapse {
float: left;
padding: 0;
.nav-search {
float: right;
padding: 18px 0;
.nav-search input {
border: 0;

Tried finding and changing “transparent” backgound colours to #ffffff but none seem to work. Please advise? Thank you very much for your help Movin!

Hi @mademoisellebel,

This is old thread and to help us keep support thread separates could you please create your own thread for your question here instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.


Hi, How can I put the arrow down (to know there are more levels inside) on the new leves (Because if not, the user can’t know that there is another level)??


@gonzimalaga As said above please create separate topic for your question.