[Duncan]

By default the child menu items in the responsive (secondary) menu are indented only by the width of the added – (dash). I’d like to either increase the indent significantly (20px or more) or simply add additional dashes (4 or more) to visually offset the child menu items from their parent menu items.

Can anyone help with this? I’ve scoured the responsive.css and style.css files as well as catchkathmandu-menus.php but haven’t found where the code that creates the dash and the indent resides.

Thanks!

[Mahesh]

Hi @dmonserud,

The dashes is added by tinynav jquery plugin used by the theme. That is why you didn’t find it in catchkathmandu-menus.php.
First, you’ll need to create a child theme. You can find more details on creating child theme HERE. Then in you child theme’s functions.php, add the following codes:

add_action( 'wp_enqueue_scripts', 'catchkathmandu_child_modify_menu' );
function catchkathmandu_child_modify_menu(){
	wp_deregister_script('catchkathmandu-menu', get_template_directory_uri() . '/js/catchkathmandu-menu.min.js', array('jquery'), '20140317', true);
	wp_deregister_script('catchkathmandu-allmenu', get_template_directory_uri() . '/js/catchkathmandu-allmenu.min.js', array('jquery'), '20140317', true);
	wp_register_script('catchkathmandu-allmenu', get_stylesheet_directory_uri() . '/catchkathmandu-allmenu.js', array('jquery'), '20140317', true);
	wp_register_script('catchkathmandu-menu', get_stylesheet_directory_uri() . '/catchkathmandu-menu.js', array('jquery'), '20140317', true);
}

Then copy catchkathmandu-allmenu.js and catchkathmandu-menu.js files from Catch Kathmandu (Parent Theme) folder/js to Catch Kathmandu Child theme’s root directory. And in both copied js file, go to line 9 and add number of dashes ‘-‘ in indent option, so it would look as follows:
'indent' : '---- ',
Note: Added 3 more dashes to make 4 as you’ve mentioned above.

Let me know if this helped with your issue.

Regards,
Mahesh

[Duncan]

Thanks for your quick and detailed response! I’ll follow your instructions.

[Duncan]

Mahesh,

I followed your steps but I’m still only seeing a single ‘- ‘ indent for child menu items.

-Duncan

[Mahesh]

Hi @dmonserud,

Please post in your site url.

Regards,
Mahesh

[Duncan]

It is currently a ‘Website Coming Soon’ page since I’m still in development, but it is http://50.87.248.87/~musicex1/

[Mahesh]

Hi @dmonserud,

Nothing to check in your site. Just “Website Coming Soon” page is there…..
Please make sure you are using the child theme, not the parent theme. And do you get any errors?

Regards,
Mahesh

[Duncan]

I tried again but messed up and edited the parent theme. I took out the dashes I added to return the script to its original state but now my responsive menu is completely gone on mobile. Still looks fine on desktop.

[Duncan]

Mahesh,

Nevermind–I was able to download the theme and overwrite the four .js files I mistakenly edited, so my responsive mobile menu is functioning again. At this point I’m quite happy to leave the indent alone, but I do thank you for your attention to my issue.

Best regards,
Duncan

[Mahesh]

Hi @dmonserud,

I’ve managed the changes in the child theme and you can download the child theme’s zip in the following link. Hope it helps.
http://bit.ly/1UgYXs3

Regards,
Mahesh

[Author]

Posts