hamburger menu doesn't expand about understrap-child

[jznadams]

interesting. If I open an incognito tab it works fine there too. Something must be cached in my browser from the previous beta version. Blah! Thanks for all the help!!!!!

[piedrola]

I'm dying. That's what I already thought of but I didn't come across this easy thing.

Thanks a lot, of course it's fine now!

[holger1411]

Hi!
Can it be that you use different versions of Bootstrap?
Since Bootstrap 4 Alpha 6 the markup should looks like this:
https://github.com/holger1411/understrap/blob/master/header.php

So if you using the new markup but with BS 4 Alpha 5 it will not work.
Its a common problem becasue if you update your parent theme you have to update the dependencies in your child theme, too.

A bit nasty but since BS4 is still in alpha it happends sometimes in a new release.

Make sure that the package.json in your child theme folder include this:
"bootstrap": "^4.0.0-alpha.6",

and that you run
npm install
to install the correct version.
Than recompile you SASS code with:
gulp scss-for-prod

[jznadams]

I'm having a similar issue, but my responsive menu expands properly and then immediately closes just as the animation finishes. I've updated my header.php file to match what you mentioned, but I cannot for the life of me figure out why it's behaving this way.

When I try to run the gulp command you provided above, I'm seeing an error:

understrap-child xxx$ gulp scss-for-prod
[09:10:50] Using gulpfile /projects/wordpress-theme/wp-content/themes/understrap-child/gulpfile.js
[09:10:50] Starting 'scss-for-prod'...
[09:10:50] 'scss-for-prod' errored after 10 ms
[09:10:50] ReferenceError: clone is not defined
    at Gulp.<anonymous> (/projects/wordpress-theme/wp-content/themes/understrap-child/gulpfile.js:46:29)
    at module.exports (/projects/wordpress-theme/wp-content/themes/understrap-child/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/projects/wordpress-theme/wp-content/themes/understrap-child/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/projects/wordpress-theme/wp-content/themes/understrap-child/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/projects/wordpress-theme/wp-content/themes/understrap-child/node_modules/orchestrator/index.js:134:8)
    at /Users/xxx/.nvm/versions/node/v7.0.0/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/index.js:46:20
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:609:11)
    at run (bootstrap_node.js:382:7)

[holger1411]

Could you find this:
var clone = require('gulp-clone');
in your gulpfile.js of your child?

If not its seems you use an older version of this file. Its the best to copy the package.json and the gulpfile.js from here:
https://github.com/holger1411/understrap-child

Than run
npm install

than
gulp scripts <- just to make sure it is not a JS problem

followed by
gulp scss-for-prod

[jznadams]

I don't actually see that require('gulp-clone'); in the repo:

https://github.com/holger1411/understrap-child/blob/master/gulpfile.js

it is in the package.json though

[jznadams]

I also had to add var merge = require('gulp-merge'); to the gulpfile and then the gulp scss-for-prod command ran successfully.

[holger1411]

Arhg...ahm...yes...of course...
Seems I don´t merge the parent theme changes to the child theme...
Done it here: c0b0846

[jznadams]

Unfortunately even after all of that I'm still seeing the same responsive menu behavior:

Any ideas of where else I might look? At this point I'm just pulling things out until I can get anything working.

[holger1411]

Can you post the URL?

[jznadams]

Here is a temporary URL: http://xxxxxxxx.ngrok.io/

[holger1411]

I test it here with Chrome, FF and Safari and it works.
Is JS enabled in your browser? Which browser do you use?

[jznadams]

whaaaaat. Chrome 55.0.2883.95 on Mac. Yeah, I see that it works on Safari now. I tried logging out as an administrator and that didn't seem to help either. I wonder if it's just some kind of beta issue? There are lots of Github issues related to the navbar in the bootstrap repo

[holger1411]

My gif was taken with Chrome Version 55.0.2883.95 (64-bit) on a Mac, too ...

[piedrola]

Hi Holger, thanks for your detailed reply. I couldn't fix it yet. The markup was just right, even changing to original markup didn't change a thing. I'm on 0.5.3 and 0.1.9 since today.
When you come across another possible fix feel free to text me again.

Thanks
~Daniél

[holger1411]

@piedrola : Can u post the URL? And do you see the same behavior on our demo website: https://understrap.com/understrap ?

[piedrola]

Thanks Holger, I pushed it on a test-environment. http://wp12012786.server-he.de/www/testwp/

Your demo site is working correctly. Can't imagine that there's a problem with my browser/workspace. Clear cache etc.

Thanks for having a look!

EDIT: of course the markup beside the menu may be bad as I only focused on the menu yet

[holger1411]

Hi!
You site just stopps loading at some point.
Behind this HTML tag:

<section id="start-flex" class="outer">
...
</section>

Nothing happends anymore. No closing </htm> or </body> tag etc.

Because this your site did not load the wordpress footer, and because of this it did not load the Boostrap JS.
Thats the reason why the hamburger icon menu did not work.

Looks like a PHP problem or a missing PHP file

[piedrola]

Great, I will check that Holger. Thanks a lot.