links in navbar are listed vertically instead of horizontally in rails project

Question

I'm new to ruby and css. I want to create a navbar in my rails project where the links are going horizontally in a row. Right now they are listed vertically. In the materialize documentation, it showed that all I had to do was enter "right hide-on-med-and-down" for the class in <ul>. However, that doesn't seem to be working for me.

What am I doing wrong? Any advice would be greatly appreciated.

Here is my application.html.erb file.

<!DOCTYPE html>
<html>
  <head>
    <title>PlacesToGo</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
  </head>
  <body>
    <header>
      <div class="navbar-wrapper">
        <div class="container">
          <a class="brand-logo" href="<%= root_url %>"/><h2>Places To Go</h2></a>
              <ul id="nav-mobile" class="right hide-on-med-and-down">
                <% if current_user %>
                  <li><%= link_to "Home", user_path(current_user)%></li>
                  <li><%= link_to "Sites", sites_path %></li>
                  <li><%= link_to "Restaurants", restaurants_path %></li>
                  <li><%= link_to "Hotels", hotels_path %></li>
                  <li><%= link_to "Log Out", logout_path %></li>
                  <br />
                  <%= form_tag(users_path, :method => "get", id: "search-form") do %>
                    <%= text_field_tag :search, params[:search], placeholder: "Search Users" %>
                    <%= submit_tag "Search", :name => nil %>
                  <% end %>
                <% else %>
                  <li><%= link_to "Sign Up", new_user_path %></li>
                  <li><%= link_to "Sign In", signin_path %></li>
                <% end %>
              </ul>
        </div>
      </div>
    </header>
  </body>
</html>

Possible duplicate of [how to align all my li on one line?](http://stackoverflow.com/questions/2325926/how-to-align-all-my-li-on-one-line) — Teocci, Apr 26 '17 at 02:34

score 0 · Accepted Answer · answered Apr 26 '17 at 02:42

0

Ruby is going to print something like this in HTML what you need is create a new CSS rule to handle and convert the ul and li tags in a navbar. This is a basic example based on your html code.

#nav-mobile {
  overflow-x: hidden;
  white-space: nowrap;
  height: 1.2em;
  width: 100%;
}

#nav-mobile li {
  padding: 10px;
  display: inline;
}

<ul id="nav-mobile" class="right hide-on-med-and-down">
  <li>Home</li>
  <li>Sites</li>
  <li>Restaurants</li>
  <li>Hotels</li>
  <li>Log Out</li>

  <li>Sign Up</li>
  <li>Sign In</li>
</ul>

answered Apr 26 '17 at 02:42

Teocci

7,189
1
50
48

Oh, I see. Thank you for your help! – C. Yee Apr 27 '17 at 11:46
@C.Yee if this Answer helps you please mark the question as answered to close the question and also help others to find this answer. – Teocci Apr 27 '17 at 17:49
I clicked the check sign. That should close it? Thank you. – C. Yee Apr 28 '17 at 18:22

links in navbar are listed vertically instead of horizontally in rails project

1 Answers1