Can't toggle sub-menu items on collapsed nav

I started by wondering if your child theme was styling something in a way that caused this, but when I look through the css applied to your menu, very little is coming from your child theme. My current theory is that something is strange with your Javascript.

If you use a clean (fresh download) version of the-bootstrap on a fresh WP instance in your test environment and set up your menu structure, can you replicate this there?

Another thing I noted is that Konstantin’s example has real links under the top-level menu items, not # links. I don’t think this is your problem, but it’s another option to investigate if the clean install has the same problem.

Finally, note that on touch devices (tablets and phones, which is where you’d get the responsive menu) menus more than 2 levels deep don’t work. For example, when I open Konstantin’s example on my phone, I can touch Level 1 and get Level 2 showing, but if I touch Level 2, it collapses and I can’t get to Level 3. I can drop Parent Page and get a Child Page to show, but when I touch Child 1, I also end up selecting the Search box because it collapses after I select. Your mileage may vary, but if you’re going to have more than 2 levels (e.g. Bowling Fundraiser is 3 levels), what you’re getting is actually usable for touch devices, where what you’d get from the correct behavior would not be.

Also, FWIW, your “Welcome to EPX” block has issues on smaller screens. Shrink your browser window to 360px wide and you’ll see what I mean.

If you want to use FontAwesome, you may want to consider compiling your own version of bootstrap.min.css from the LESS and replacing the default iconfont with FontAwesome. It’s a simple swap documented on the FA site. This would eliminate your FA plugin and let you customize colors, etc. so you wouldn’t have to override colors in the child theme’s CSS. See bootswatchr.com for a WYSIWYG tool to write the variables.less file.

Hope something there is helpful.

Wow, thanks for all of that. I will try a fresh install but I have a feeling it will work fine. I’ll take a look at the javascript and see if I can figure it out. If you or anyone else out there can debug in the console go for it, I’m still learning a lot of this stuff. The “#” vs real link doesn’t seem to make a difference.

Thanks for the tips on the other stuff too. It is all really good advice. Just have to figure out how to implement it.

A couple of other notes re: FontAwesome.

If you aren’t comfortable compiling LESS (if you’re looking at js, you probably are), you have a couple of options. You can simply inject the stylesheet for FA after bootstrap.min.css. See https://fortawesome.github.io/Font-Awesome/#integration for an example of this and wp_enqueue_style in WP Codex.

Alternatively, you can go to bootswatchr.com and create a custom version of Bootstrap without sprites.less–just discovered this today. (bootswatchr.com, Start Creating in the hero unit, wait for the js to load and initialize, Settings tab, set Exclude Icons to show Exclude, get the css, replace in the-bootstrap/css, then inject FA’s stylesheet as above) This option reduces the size of your bootstrap css by not loading the default icon styles that you won’t need with FA.

Note that bootswatchr only generates the CSS (or variables.less), so it uses Twitter Bootstrap 2.3.0 (unless you select a different version in Settings). BS 2.3.1 is a set of js-only fixes, so doesn’t affect bootswatchr. Also bootswatchr generates bootstrap and bootstrap-responsive in a single css file. You can empty bootstrap-responsive.min.css or you can wp_dequeue_style( ‘twitter-bootstrap-responsive’ ); so it isn’t included on the page at all. (You’ll want to wrap the dequeue in a function and add_action( ‘init’, ‘function_name’ ); after the function.)

If you’ll set up a (test) site with un-minified bootstrap.js (just rename unminified to .min. so it will load) and give me a link to it, I’ll try to look at it in the Firebug console. Minified js is a mother to debug. ??