How to Position Logo using Twitter Boostrap 3.3.1 in Rails 4.2 Project
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