-1

I'm new to bootstrap. I want to change the font color and size in the navbar but cant get it done. I cant seem to find out how to simply style anything on the navbar and currently the text in it looks very average. There are some answers here stackoverflow but they involve a lot of css just for some simple things and always have comments of how it that method is bad practice for x reason

here is what the text looks like.

enter image description here

I just need the text to not be hugging the top of the page with even gap between the top and bottom of the navbar, and be able to style the text (change the size and color and remove the bullet point next to 'Account').

here is the navbar coding (i'm also using ruby on rails)

<header class="navbar navbar-fixed-top navbar-default">
  <div class="container">
    <div class="navbar-header pull-left">
    <%= link_to "site name", root_path, id: "logo" %>
     </div>
    <nav>
      <div class="navbar-header pull-right">
      <ul>
        <% if logged_in? %>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Account <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><%= link_to "Notifications", user_user_notifications_path(current_user) %></li>
              <li><%= link_to "Mailbox", user_conversations_path(current_user) %></li>
              <li><%= link_to "Profile", current_user %></li>
              <li><%= link_to "Settings", edit_user_path(current_user) %></li>
              <li class="divider"></li>
              <li>
                <%= link_to "Log out", logout_path, method: "delete" %>
              </li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to "Log in/ Signup", login_path %></li>
        <% end %>
      </ul>
    </nav>
  </div>
</header>

How can this be done in bootstrap 3?

Rob
  • 1,835
  • 2
  • 25
  • 53
  • Tried styling using `.navbar {}` and other variations in the css file but they don't do anything – Rob Apr 09 '16 at 06:28

1 Answers1

0

You can simply add the following <a href="#" class="dropdown-toggle" data-toggle="dropdown"><font color="your-color-choice" size=""> Account <b class="caret"></b></font> </a>

To get your text in the middle of the block, you check out the following code: https://www.w3.org/Style/Examples/007/center.en.html#vertical

basically you have to use, vertical align:middle;

Hope this helps!

akc
  • 1
  • 1
  • Still doesn't allow me to remove the bullet point from the `li`. I like to keep css in the css file – Rob Apr 09 '16 at 06:27
  • you could check this out - http://stackoverflow.com/questions/1027354/need-an-unordered-list-without-any-bullets – akc Apr 09 '16 at 14:12