I recently bought a twitter bootstrap template at www.wrapboostrap.com , then I just added the css files to assets/stylesheets and do the same with javascripts, also changed de route inside of every css files to assets/images for some css stuff, but when I place the navbar markup on layout.html.erb the navbar displays all the list of options without make click on it. (see images) I have also added the line //= require bootstrap on application.js file.
This is my markup
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Mymaps</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application"%>
<%= stylesheet_link_tag 'gmaps4rails' %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="container">
<%= render :partial => 'layouts/navbar' %>
<%= yield %>
<%= yield :scripts %>
</div>
</body>
</html>
_navbar.html.erb
<!--top menu-->
<section id="top-menu">
<div class="container">
<div class="row">
</div>
</div>
</section>
<!--header-->
<header id="header">
<div class="container">
<div class="row header-top">
<div class="span5 logo">
<a class="logo-img" href="#"><img src="assets/logo.png" alt="Tabulate"></a>
<p class="tagline">Responsive Website Template</p>
</div>
<div class="span7 social-container" >
<p class="phone hidden-phone"><i class="icon-envelope"></i> [email protected]</p><p class="phone hidden-phone"><i class="icon-bell"></i> Call Us +1 800 123 45 67</p>
<div class="top-social">
<a data-original-title="Facebook" rel="tooltip" data-placement="top" class="facebook"
href="#"></a>
<a data-original-title="Twitter" rel="tooltip" data-placement="top" class="twitter2"
href="#"></a>
<a data-original-title="Dribble" rel="tooltip" data-placement="top" class="dribbble"
href="#"></a>
<a data-original-title="Digg" rel="tooltip" data-placement="top" class="digg"
href="#"></a>
<a data-original-title="DeviantArt" rel="tooltip" data-placement="top" class="dart"
href="#"></a>
<a data-original-title="Market" rel="tooltip" data-placement="top" class="market"
href="#"></a>
</div>
</div>
</div>
<div class="row header-nav">
<div class="span12">
<nav id="menu" class="clearfix">
<ul>
<li class="current"><a href="./index.html" ><span class="name">Home</span></a>
<ul>
<li><a href="./index.html">Home Page 1</a></li>
<li><a href="./index2.html">Home Page 2</a></li>
<li><a href="./index3.html">Home Page 3</a></li>
</ul>
</li>
<li><a href="./about.html"><span class="name">Features</span></a>
<ul>
<li><a href="./about.html">About Us</a></li>
<li><a href="./full-width.html">Full Width</a></li>
<li><a href="./bs-scaffolding.html">BootStrap Pages</a>
<ul>
<li><a href="./bs-scaffolding.html">Scaffolding</a></li>
<li><a href="./bs-base-css.html">Base CSS</a></li>
<li><a href="./bs-components.html">Components</a></li>
<li><a href="./bs-javascript.html">JavaScript</a></li>
</ul>
</li>
<li><a href="./font-awesome.html">FontAwesome</a></li>
<li><a href="./price-table.html">Price Table</a></li>
<li class="last"><a href="./404.html">404 Page not found</a></li>
</ul>
</li>
<li><a href="./portfolio4.html"><span class="name">Portfolio</span></a>
<ul>
<li><a href="./portfolio2.html">Portfolio 2 col</a>
<ul>
<li><a href="./portfolio2.html">Portfolio 2 Columns</a></li>
<li class="last"><a href="./portfolio2ex.html">Portfolio 2 Columns Extended</a></li>
</ul>
</li>
<li><a href="./portfolio3.html">Portfolio 3 col</a>
<ul>
<li><a href="./portfolio3.html">Portfolio 3 Columns</a></li>
<li class="last"><a href="./portfolio3ex.html">Portfolio 3 Columns Extended</a></li>
</ul>
</li>
<li><a href="./portfolio4.html">Portfolio 4 col</a>
<ul>
<li><a href="./portfolio4.html">Portfolio 4 Columns</a></li>
<li class="last"><a href="./portfolio4ex.html">Portfolio 4 Columns Extended</a></li>
</ul>
</li>
<li class="last"><a href="./portfolio-single.html">Single Portfolio</a></li>
</ul>
</li>
<li><a href="./blog-sidebar-right.html"><span class="name">Blogs</span></a>
<ul>
<li><a href="./blog-sidebar-right.html">Blog - Sidebar Right</a></li>
<li><a href="./blog-sidebar-left.html">Blog - Sidebar Left</a></li>
<li><a href="./blog-type-1.html">Blog Type 1</a></li>
<li><a href="./blog-type-2.html">Blog Type 2</a></li>
<li class="last"><a href="./blog-single.html">Blog Single</a></li>
</ul>
</li>
<li><a href="./contact.html"><span class="name">Contacts</span></a></li>
</ul>
</nav>
<!--<form class="top-search pull-right">-->
<!--<input type="text" placeholder="text here..." class="span3">-->
<!--<button type="button" class="btn"><i class="icon-search-form"></i></button>-->
<!--</form>-->
</div>
</div>
</div>
</header>
Gemfile
source 'https://rubygems.org'
gem 'rails', '3.2.13'
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
gem 'sqlite3'
gem 'gmaps4rails'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'uglifier', '>= 1.0.3'
end
gem 'jquery-rails'
# To use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~> 3.0.0'
# To use Jbuilder templates for JSON
# gem 'jbuilder'
# Use unicorn as the app server
# gem 'unicorn'
# Deploy with Capistrano
# gem 'capistrano'
# To use debugger
# gem 'debugger'
JS mainfest
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
Hi I just find out what was my issue, First of all I just move all javascritps and css to vendor/Javascripts and vendor/stylesheets , then added those entries in application.js and application.css manifest. Making a lot of investigation I've figure it out that jquery.min.js has to be loaded first, so It appears that jquery.min.js was not loading first, so I just add a new entry on my application.js mainfest and Violá!!! all jquery animations started to work!.
So, I will recommend that always make sure that your jquery.min.js load first, if you are Working with wrapbootstrap themes. to do that just simply add the next line on your application.js manifest