简体   繁体   中英

Bootstrap 3: toggle off-canvas navigation menu doesn't work

I have the following issue. I am developing a website using the Bootstrap3 framework to give it a nice responsiveness. In some of the pages I use the off-canvas navigation menu (example can be found here: http://getbootstrap.com/examples/offcanvas/ ). When developing locally, it works perfectly (if I make the screen's width small, the menu disappears, a toggle button appears and when clicked, the menu slides from the right). The problem is when I try to do the same on the server (web hosting: fatcow.com). The toggle button will not trigger the menu sliding. (here an example video: http://screencast.com/t/8dZoW4gK ) When I use 'Inspect element' on Google Chrome, I see that there is some additional code added to the source code of the page.

http://screencast.com/t/59vze3aZd3m

<script type="text/javascript" src="//ajax.cloudflare.com/cdn-cgi/nexp/abv=2545410587/cloudflare.min.js"></script>

<style type="text/css">.cf-hidden { display: none; } .cf-invisible { visibility: hidden; }</style>

<script data-module="cloudflare/rocket" id="cfjs_block_1313ed8fefd" onload="CloudFlare.__cfjs_block_1313ed8fefd_load()" onerror="CloudFlare.__cfjs_block_1313ed8fefd_error()" onreadystatechange="CloudFlare.__cfjs_block_1313ed8fefd_readystatechange()" type="text/javascript" src="http://esngreece.gr/cdn-cgi/nexp/abv=980862342/cloudflare/rocket.js"></script>

I have no idea why this code is added on the section, but this is the only difference from the localhost, so I suppose there is a js conflict.

Thanks in advance

That looks like Rocket Loader is impacting it. Have you tried turning that off in your CloudFlare Performance Settings?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM