Bootstrap navigation collapse problems

[Russell]

Hi everyone:

I’m trying to modify a boostrap navigation bar for my website (http://testing003.compoundeyedesign.com/).

What I want is a horizontal nav bar to collapse into a small button when viewed in mobile. Bootstrap’s sample is here:

http://getbootstrap.com/examples/navbar/

When I transplant their code into mine, it throws up two problems:

1. The little collapsed navigation button doesn’t expand to show all menu options when pressed.

I’ve gone through the code to make sure I’m replicating their code as much as possible with mine. I’m using their unmodified bootstrap.css file and temporarily removed my own supplemental css file, but that didn’t seem to help.

Any ideas?

1. On an iPad’s portrait view I’d like the navigation to turn into a button because the site’s logo and the navigation menu items just don’t fit on the same row. Screenshot here:

http://www.compoundeyedesign.com/temp/amafille-nav-1.jpg

I had a snoop around the bootstrap.css to see if modifying the screen sizes for the .collapse class would help, but it didn’t. I’m a little out of my depth here so any ideas would be welcome.

Thanks in advance.

Kind regards, Russell

[Josh]

Hallo, good sir. It appears that you’re missing bootstrap.js, or at least, it’s not loading correctly according to Chrome DevTools. Your code looks fine, but as bootstrap.js isn’t loading, there’s nothing to tell that button what to do.

[Author]

Posts