I’ve been working through Kezz Bracey’s _S custom wordpress theme tutorial, and can’t seem to figure this part out.
For section 4.2, Adding Touch-Friendly Responsive Menus, @kezzbracey has us add a navigation-custom.js file which is intended to add a <span>+</span> to menu items that have children (4.2). I’m unable to make the arrows appear, or to make the dropdown functionality work at all. I rewatched the video a few times to make sure i didn’t miss any steps. I’d love some assistance with this.
Here’s a link to the navigation-custom.js in question. Below is the excerpt which, as far as I can tell, isn’t firing.
menu_ul.children('.menu-item-has-children').children('a').append('<span class="mytheme_menu_switch">+</span>');
From inspecting the element, I’m convinced that the javascript isn’t working, for whatever reason, because i don’t see the <span>+</span> rendered in the page source. In the image below, both Pages and Parent Page should display arrows. I must be missing something.
https://support.tutsplus.com/attachments/token/IKDO7ltTNIOWbLEHS8J9JksJb/?name=Screen+Shot+2016-07-18+at+2.23.13+PM.png
Hey @point_at_dexter, thanks for taking the course!
I took a look at the current site code (thanks for the screenshot that was helpful) and it seems the reason the script is not picking up your menu item is the class name WP has output on the li elements that have children.
The script is written to look for the class menu-item-has-children but at present they have the class page_item_has_children instead.
For reasons I’m not sure of, WP will output different classes on menu items that have children depending on whether the menu has been added via the custom menu system or auto generated from the site’s collection of pages.
If you add a custom menu that should make the class you want appear instead.
I’m not sure why a menu wasn’t automatically added as part of adding the test content - perhaps it has been changed since the course was created.
And if you’d like to alter the JS so it will account for both classes you should be able to add the extra class after a comma:
menu_ul.children('.menu-item-has-children,.page_item_has_children').children('a').append('<span class="mytheme_menu_switch">+</span>');
Please note, the above code is untested but theoretically it should work.
Could you let me know how you go so we can add a note to the course if needs be?
@kezzbracey
I added .page_item_has_children to the script, but it’s still not affecting pages with children. I actually did make custom menus in the WP cms, because I’m trying to modify this theme for a client. I can’t quite figure out how this file becomes involved in the process, or how it knows to target that particular menu. It’s present in the custom_functions.php script, and I commented out navigation.js in the functions.php script, but to no avail.
Thoughts? Anything I can screenshot for you?
Aside:
FWIW, this was my first encounter with Sass and, grumbles from some of the forum users notwithstanding, I managed to get Prepros up and running just as your video showed ( and it was very cool!)
I find the prospect of developing css with Sass intriguing, but also quite intimidating. If I’m creating a custom site for a client, should I make a _custom-styles.scss with all my site colors and variables the way you did?
Following Kezz’s lead is always a good thing 
And if you need more in-depth help with learning Sass I recommend you check out 14 Days to Learn Sass by @AdiPurdila 
Hmm, that’s a little strange. What would be best is if you could setup a little test site somewhere with your theme on it then PM me the URL so I can have a look at the code live / first hand.
When you asked how the file becomes involved in the process, do you mean the “navigation-custom.js” file?
When doing your own custom work, I’d definitely recommend working inside custom Sass files. It’s always a good idea to keep the originals there for reference, and so that if you need to get an updated version of the original theme later you know exactly which files contain your modifications.
Sass is brilliant, but it’s always a good idea to consider it as a layer on top of solid CSS. If you feel really confident with CSS then preprocessors can streamline things so well, but it’s still super important to make sure you understand exactly what is going on with the CSS being produced.