| Comments

Bootstrap Active Class Solution for Navbar in Rails

Sometimes while you are adding bootstrap to your rails app, you can getting some problem on javascript side. In this article I try to explain how we can fix active class to navbar . For fixing, you can write in helper active_class method like below

1
2
3
4
5

module ApplicationHelper
  def active_class(link_path)
    current_page?(link_path) ? 'active' : ""
  end
end

In your views from bootstrap classes should be like,

1
2
3
4
5
6
7

%ul.nav.navbar-nav
  %li{class: active_class(about_path)}
    = link_to 'About', about_path
  %li{class: active_class(works_path)}
    = link_to 'Our Works', works_path
  %li{class: active_class(contact_path)}
    = link_to 'Contact', contact_path

In addition, you can update according to your style to below command, but in this part it s important to use !important method for overwrite on active class .

1
2

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:active
  color: red !important

That’s all. I hope helped to you.

For more information: http://goo.gl/twDl3t

Comments