CODEWITHSUNDEEP
htmlcssruby-on-railstwitter-bootstrap
Carson
Carson

Reputation: 1257

Navbar created with bootstraps has white space on left and right

I'm trying to customize my navbar for a Ruby on Rails application, however, the left and right sides of it are not following the colors so it looks like the image below.

enter image description here

Notice the white spaces to the left and right. I got the inner-most part to change color by changing the .container background color in my style.css.

/*********
Navbar Styles
**********/

.navbar-static-top .container {
  background-color: #3f51b5;
}

Though the sides don't change.

Selecting my navbar and seeing what the .container div is covering, it looks like it should be the entire navbar as per the picture below.

enter image description here

So, I would think I am changing the background of the correct element. I read some things how bootstraps adds unecessary padding to the right and left. So I tried implementing those overrides in my style.css file, but it also did not work.

So I'm at a lost for what's going on, my guess is somewhere Rails or Bootstraps or maybe the Devise gem for user authentication somehow, is generating this weird padding on the sides when I don't want it. Though I don't know. I was using some like, template HTML/CSS files at the start but I removed all them. The only style sheets in my Assets folder are mine, application.scss, and users.scss but users.scss has nothing in it.

Any help would be appreciated thanks in advance.

style.css

/*********
Navbar Styles
**********/

.navbar-static-top .container {
  background-color: #3f51b5;
  padding-right: 0; /*15px in bootstrap.css*/
  padding-left: 0;  /*idem*/
  margin-right: auto;
  margin-left: auto;
  border-color: #3f51b5;
}

/**********
Devise Alert styles
***********/
.alert-box {
  color:#555;
  border-radius:10px;
  font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
  padding:10px 10px 10px 36px;
  margin:10px;
  span {
    font-weight:bold;
    text-transform:uppercase;
  }
}
.danger {
    background:#ffecec url('images/error.png') no-repeat 10px 50%;
    border:1px solid #f5aca6;
}
.success {
    background:#e9ffd9 url('images/success.png') no-repeat 10px 50%;
    border:1px solid #a6ca8a;
}
.warning {
    background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;
    border:1px solid #f2c779;
}
.notice {
    background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;
    border:1px solid #8ed9f6;
}

application.html.erb

<!DOCTYPE html>
<html>
<head>
    <title>Shiplist</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
</head>
<nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <%= link_to 'SHIP LIST', root_path, class: "navbar-brand"%>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <% if user_signed_in?%>
                <li><%= link_to 'post ad', new_listing_path %></li>
                <li><%= link_to 'log out', destroy_user_session_path, :method => :delete %></li>
                <% else %>
                <li><%= link_to 'sign up', new_user_registration_path %></li>
                <li><%= link_to 'log in', new_user_session_path %></li>
                <% end %>
            </ul>
        </div>
</nav>
<body>
<%= render 'layouts/messages' %>
<%= yield %>

</body>
</html>

Upvotes: 1

Views: 1591

Answers (1)

kcNeko
kcNeko

Reputation: 609

try overwriting the navbar-default on your own style.css.

.navbar-default{
  background-color: /*your color here*/  !important;
}

or if you want to get rid of the unnecessary white spaces, remove the class="container"then add padding: 0 1% /*example*/ to .navbar-default.

Upvotes: 1

Related Questions