RefineryCMS: apply bootstrap styles to navigation menu

Question

I have upgraded Refinery CMS to the newest version (2.1.0), where there is a new approach in rendering the navigation menu :

(in partial _header.html.erb)

<%= Refinery::Pages::MenuPresenter.new(refinery_menu_pages, self).to_html %>

The older version of the same partial :

<%= render(:partial => "/refinery/menu", :locals => {
         :dom_id => 'menu',
         :css => 'menu'
       }) %>

How could I add bootstrap styles to the navbar using MenuPresenter?

Answer 1

It can be done, but the solution is not pretty because the Menu Presenter in Refinery 2.1 doesn't support all the right CSS options out of the box. But with a bit of perseverance, this is roughly what to do:

Firstly, create a new blank file here: config/initializers/refinery/monkey_patch_menu_presenter.rb

In this patch file, paste in the contents of this updated version of the menu presenter (published October 2013): menu_presenter.rb

Next, based on the instructions in section 5 of the menu presenter guide, in your app/helpers/application_helper.rb file, add a new method called navigation_menu:

def navigation_menu
  presenter = Refinery::Pages::MenuPresenter.new(refinery_menu_pages, self)
  presenter.css = "navbar-inner"
  presenter.menu_tag = :div
  presenter.list_tag_css = "nav"
  presenter.selected_css = "active"
  presenter.first_css = ""
  presenter.last_css = ""
  presenter.max_depth = 0 # prevents dropdown menus, which don't render correctly
  presenter
end

Finally, in your app/views/refinery/_header.html.erb file (use $ bundle exec rake refinery:override view=refinery/_header if it doesn't exist), replace the call for:

<%= Refinery::Pages::MenuPresenter.new(refinery_menu_pages, self).to_html %>

with:

<div class="navbar">
  <%= navigation_menu.to_html %>
</div>

Ensure that you have the loaded the Bootstrap CSS/JS files and have wrapped the whole page in a <div class="container"> element. Then restart your application for the patch to take affect and hopefully you'll see a familiar bootstrap navigation bar.

Good luck!

Martyn.