How to Position Logo using Twitter Boostrap 3.3.1 in Rails 4.2 Project

By

Steps

Step 1

There are two resized images logo_300w.png and logo_500w.png that needs to be copied to app/assets/images/ folder.

The images have dimensions of 300x53 500x88 with 72 pixels/inch resolution. Both images have transparent background so that it blends with the current background color of the navigation bar.

Step 2

Customize the navbar-brand in the navigation as follows

<nav class="navbar navbar-default" role="navigation">

  <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
  data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand pull-left" href="/">
        <%= image_tag 'logo_300w.png', border: "2", class: "img", style: "margin-top: -14px;" %>
      </a>
    </div>

  HTML code for links omitted.
</nav>

Step 3

That's it. Thanks to Paul Gemignani of 4waytours for this CSS hack.

Related Articles

Create your own user feedback survey