Tagged: catch kathmandu pro, menu, Mobile Menu, Responsive menu
- This topic has 9 replies, 2 voices, and was last updated 9 years, 6 months ago by
Mahesh.
-
AuthorPosts
-
March 9, 2016 at 3:02 pm #87138
Duncan
MemberBy 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!
March 9, 2016 at 4:28 pm #87142Mahesh
ParticipantHi @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’sfunctions.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
andcatchkathmandu-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,
MaheshMarch 10, 2016 at 1:48 am #87177Duncan
MemberThanks for your quick and detailed response! I’ll follow your instructions.
March 10, 2016 at 7:52 am #87192Duncan
MemberMahesh,
I followed your steps but I’m still only seeing a single ‘- ‘ indent for child menu items.
-Duncan
March 10, 2016 at 9:53 am #87199Mahesh
ParticipantMarch 10, 2016 at 10:12 am #87204Duncan
MemberIt is currently a ‘Website Coming Soon’ page since I’m still in development, but it is http://50.87.248.87/~musicex1/
March 10, 2016 at 12:51 pm #87212Mahesh
ParticipantHi @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,
MaheshMarch 10, 2016 at 1:27 pm #87216Duncan
MemberI 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.
March 10, 2016 at 1:44 pm #87217Duncan
MemberMahesh,
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,
DuncanMarch 10, 2016 at 2:06 pm #87218Mahesh
ParticipantHi @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/1UgYXs3Regards,
Mahesh -
AuthorPosts
- The topic ‘Increase indent of child menu items on mobile’ is closed to new replies.