CSS to separate a link in the Navbar

Question

Got an annoying link in my navbar that just wont separate from the others. When signing in to my web-app the header includes 2 links that wont separate when in screen viewing mode (mobile viewing is just fine). The links are My Dashboard and Sign Out (when signed in); and Sign In and Sign Up (when not signed in):

.navbar {
  border-radius:0;
  font-family: "Helvetica Neue", Helvetica;
  font-weight: 200;
  box-shadow: 0px 1px 3px #2a2a2a;
  background: image_url('dark_wood.png');
}

.navbar a{
  font-size: 300%;  
}

.navbar-header {
  padding-top: 25px;
  height: 85px;
}

.navbar-dark a.navbar-brand {
  font-family: "Helvetica Neue", Helvetica;
  font-weight: 100;
  font-size: 400%;
  color:white;
}

      <nav class="navbar navbar-dark bg-inverse">
        <div class="navbar-header">
          <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="true" aria-label="Toggle navigation">
            <i class="fa fa-bars fa-2x" aria-hidden="true"></i>       
          </button>
        </div>
        <div class="collapse navbar-toggleable-md" id="navbarResponsive">
          <a class="navbar-brand" href="<%= root_path %>">Flixter</a>
          <ul class="nav navbar-nav">
            <li class="nav-item">
              <%= link_to 'See All Courses', courses_path %>
            </li>
          </ul>
          <ul class="nav navbar-nav">
            <% if user_signed_in? %>
              <li class="nav-item">
                <%= link_to 'My Dashboard', dashboard_path %>
              </li>
              <li class="nav-item">
                <%= link_to 'Sign out', destroy_user_session_path, method: :delete %>
              </li>
            <% else %>
              <li class="nav-item">
                <%= link_to 'Sign in', new_user_session_path, class: 'nav-link' %>
              </li>
              <li class="nav-item">
                <%= link_to 'Sign up', new_user_registration_path, class: 'nav-link' %>
              </li>
            <% end %>
          </ul>        
        </div>
      </nav>

Here is my repo in case you need.

You should add `nav-link` class to your link (`a` tag) http://stackoverflow.com/questions/5697512/adding-a-class-to-a-link-to-is-breaking-the-link — Nick, Feb 27 '17 at 20:19
It would be helpful to replace the jsp in your example with static values. It's looks to be a css issue, so this will help others to test your example — mhatch, Feb 27 '17 at 20:20
-Nick Sorry, still learning this stuff. When you say add nav-link to the a tag, do you mean:
@mhatch - If this is a css issue, how do I make adjust it to add a line break after each? I tried a simple:.nav-item {
} — peterbehere, Feb 27 '17 at 20:39
EVERYONE: Here's a link to the live app: flixter-peterbehere.herokuapp.com — peterbehere, Feb 27 '17 at 20:55

score 0 · Accepted Answer · answered Feb 28 '17 at 03:06

0

you should use the jquery mobile library, they should give you a even layout without using all that CSS. You can go to w3schools for the library. Then you can try this.

<div data-role="navbar">
  <ul>
    <li><a href="link here">Page one</a></li>
    <li><a href="link here">Page Two</a></li>
    <li><a href="slink here">Page Three</a></li>
  </ul>
</div>

answered Feb 28 '17 at 03:06

jayjay1487

38
3

Wow thanks! I'll give that a look. I'm doing a bootcamp and we are steeped in css, but just started incorporating js into our web-app. I'll give this a go. – peterbehere Feb 28 '17 at 21:20
Ok, way too much back-pedalling needs to be done and I rely on turbolinks, so I don't think this will work for me in this app. BUT, I will keep jquery mobile in mind for the next project I do. – peterbehere Feb 28 '17 at 21:53
sorry if the answer is too different to what you have already done but I would recommend you use jquery. Next time you need to make a nav bar or other things involving lots of CSS. The jquery libraries are really good and they save a lot of time. – jayjay1487 Mar 01 '17 at 02:10

CSS to separate a link in the Navbar

1 Answers1