CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrapresponsive-design
Jatin Ganhotra
Jatin Ganhotra

Reputation: 7035

Responsive CSS with Twitter Bootstrap Issue

I have a NavBar in my web-app using Ruby on Rails and Twitter Bootstrap.

The NAVBAR looks well in the browser as: NAVBAR in the browser

But, the Navbar breaks when I look up the web-app in the browser on my Galaxy Note.

NAVBAR broken in smaller screen Snippet from app/views/layouts/application.html.erb

  <div class="masthead">
    <h3 class="active"><a href="/">WebsiteName</a></h3>
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <ul class="nav">
            <li class="active"><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact Us</a></li>

            <% if current_user %>
              <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                      <strong><%= current_user.name %></strong>
                      <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="/signout">Sign out</a></li>
                  </ul>
            <% end %>

          </ul>
        </div>
      </div>
    </div>
  </div>

The CSS for the NAVBAR is borrowed primarily from:
Justified Nav Example - http://getbootstrap.com/2.3.2/examples/justified-nav.html

  /* Customize the navbar links to be fill the entire space of the .navbar */
  .navbar .navbar-inner {
    padding: 0;
  }
  .navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
  }
  .navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
  }
  .navbar .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.75);
    border-right: 1px solid rgba(0,0,0,.1);
  }
  .navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
  }
  .navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
  }

How can I fix this? I am learning Responsive CSS these days, and have no idea how to fix it.

UPDATE:

Please note that the above problem has been fixed.
But I found something wrong when this got fixed though. If I decrease the size of window too much, the navbar gets broken. The User part goes outside the navbar. The issue is also reflected in the Bootstrap example too.

I'm attaching the screenshots which showcase the issue. To see it yourself, simply decrease the window size in the Bootstrap navbar example.

enter image description here
enter image description here

Upvotes: 0

Views: 1748

Answers (3)

edsioufi
edsioufi

Reputation: 8335

The problem is that the "Contact Us" link is wrapping. Notice that, in the Bootstrap example, the navbar does not have links with multiple words.

Add white-space: nowrap; to the .navbar .nav li a class.

Here is a functioning demo. All you have to do is resize the width of the frame to test.

The demo contains 2 navbars:

  • The first navbar with the issue fixed.
  • The second reproduces the faulty behavior to isolate the cause at the "Contact us" link, by setting its style attribute to "white-space: normal;" thus overriding the fix.

Also note that you have a </li> missing before <% end %>.

Upvotes: 1

Hamid Reza
Hamid Reza

Reputation: 2973

Your bootstrap file loading should look like the following to make the responsive work:

<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-responsive.css" />

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

define the heihgt of .navbar .nav 40px and add overflow: hidden;

Upvotes: 0

Related Questions