Bootstrap and ROR - Nav not horizontal - ruby-on-rails

I'm trying to implement bootstrap into my ror app. For some reason my navs are not side by side, they are stacked on top.
Any suggestions?
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<%= link_to "Smart Health", root_path, class: "navbar-brand" %>
</div>
<ul class="nav navbar-nav">
<li><%= link_to "Register Doctor", sign_up_path %></li>
<% if signed_in? %>
<li><%= link_to "Sign out", sign_out_path, method: :delete %></li>
<% else %>
<li><%= link_to "Login", sign_in_path %></li>
<% end %>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Sort by Condition<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
</ul>
</li>
<% if signed_in? %>
<li><%= link_to "Your Patients", patients_path(user_id: current_user.id), class: "link"%></li>
<% end %>
<% if signed_in? %>
<li><%= link_to "Add Patient", new_patient_path %></li>
<% end %>
</ul>
</div>
</nav>

Try this if you use bootstrap 4
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<%= link_to "Smart Health", root_path, class: "navbar-brand" %>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<%= link_to "Register Doctor", sign_up_path, class: "nav-link" %>
</li>
<% if signed_in? %>
<li class="nav-item"><%= link_to "Sign out", sign_out_path, method: :delete, class: "nav-link" %></li>
<% else %>
<li class="nav-item"><%= link_to "Login", sign_in_path, class: "nav-link" %></li>
<% end %>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Sort by Condition</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
</div>
</li>
<% if signed_in? %>
<li class="nav-item"><%= link_to "Your Patients", patients_path(user_id: current_user.id), class: "nav-link" %></li>
<% else %>
<li class="nav-item"><%= link_to "Add Patient", new_patient_path, class: "nav-link" %></li>
<% end %>
</ul>
</nav>

Related

Why doesn't my dropdown menu expand to select the options within?

I'm building a review site using ruby on rails. When I code the drop-down menu, included in the code below, it won't expand.
I know from changing the code that the options are there and work, only the dropdown won't expand.
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<%= link_to "NDLabClub", root_path, class: "navbar-brand" %>
</div>
<ul class="nav navbar-nav">
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<% if user_signed_in? %>
<li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to "log In", new_user_session_path %></li>
<% end %>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false">Categories <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<% Category.all.each do |category| %>
<li>
<%= link_to category.breed, dogs_path(category: category.breed), class: "link" %>
</li>
<% end %>
</ul>
</li>
<% if user_signed_in? %>
<li><%= link_to "Add Dog", new_dog_path%></li>
<% end %>
</ul>
</div>
</nav>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= yield %>

How to link to another part of another page?

I have the below as my nav, however, the index.html.erb#meetflappy is throwing up an error:
Routing Error
No route matches [GET] "/preorder/index.html.erb"
I'd like it so that when users click meetflappy tab, they are brought to the index page and specifically to the #meetflappy part. Now this works when I'm on the index page and it just links to #meetflappy but when I'm on another page i'm having trouble here. Please advise:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="wrapper-nav">
<div class="navbar-header">
<%= link_to logo, root_path, class: 'brand' %></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class=""><%= link_to 'Meet Flappy', 'index.html.erb#meetflappy' %></li>
<li class=""><%= link_to 'Details', 'index.html.erb#details' %></li>
<li class=""><%= link_to 'FAQ', faq_path %></li>
<li class=""><%= link_to 'Flappy\'s Story', flappystory_path %></li>
<li class=""><%= link_to 'About Us', about_path %></li>
<li class=""><%= link_to 'Checkout', preorder_checkout_path %></li>
</ul>
</div>
</div>
</nav>
Change this:
<%= link_to 'Meet Flappy', 'index.html.erb#meetflappy' %>
to this:
<%= link_to 'Meet Flappy', root_path(anchor: 'meetflappy') %>

App name in the navbar

I am creating a sample app as a learner. How do I fix the code below to have "One Month Rails" appear on every page of my app, in the left of my navigation bar? Thank you!
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<% link_to "One Month Rails", root_path, class: "brand" %>
<div class="nav-collapse">
<ul class="nav">
<li>
<%= link_to 'Home', root_path %>
</li>
<li>
<%= link_to 'About', about_path %>
</li>
</ul>
<ul class="nav pull-right">
<% if user_signed_in? %>
<li><%= link_to "Edit Profile", edit_user_registration_path %></li>
<li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to "Login", new_user_session_path %></li>
<% end %>
</ul>
</div>
</div>
</div>
This will work for you...
<%= Rails.application.class.parent_name %>
Or more specifically...
<%= link_to Rails.application.class.parent_name, root_path, class: "brand" %>
Don't forget the equals sign in front of the link_to call.

No method error after adding a some HTML with embedded ruby

The code below works as it should, but after adding a dropdown navigation with some embedded ruby, I get a no method error.
NoMethodError in Static_pages#home
Showing D:/Ruby/sample_app/app/views/layouts/_header.html.erb where line #9 raised:
undefined method `find_by_token' for #Class:0x467a948
My _header.html.erb which gives no errors
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<%= link_to "Energy Battle", root_path, id: "logo" %>
<nav>
<ul class="nav pull-right">
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "Help", help_path %></li>
<li><%= link_to "Log in", signin_path %></li>
</ul>
</nav>
</div>
</div>
</header>
This is the _header.html.erb with the code I added. Which gives me the error.
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<%= link_to "Energy Battle", root_path, id: "logo" %>
<nav>
<ul class="nav pull-right">
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "Help", help_path %></li>
<% if signed_in? %>
<li><%= link_to "Users", '#' %></li>
<li id="fat-menu" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Profile", current_user %></li>
<li><%= link_to "Settings", '#' %></li>
<li class="divider"></li>
<li>
<%= link_to "Sign out", signout_path, method: "delete" %>
</li>
</ul>
</li>
<% else %>
<li><%= link_to "Sign in", signin_path %></li>
<% end %>
</ul>
</nav>
</div>
</div>
</header>
It's telling you that there is a problem with your signed_in? method.
That's where you need to start checking.
Hope this helps

Showing users name on nav bar when logged in using ruby on rails

I want to be able to replace Accounts tab on my navigation bar with the User's name when they logged in. How would i go about doing that. Would i have to use some sort of embedded ruby like <%= #user.name %>
heres the html
enter code here
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<%= link_to "sample app", root_path, id: "logo" %>
<nav>
<ul class="nav pull-right">
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "Help", help_path %></li>
<% if signed_in? %>
<li><%= link_to "Users", '#' %></li>
<li id="fat-menu" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Profile", user_path(current_user) %></li>
<li><%= link_to "Settings", '#' %></li>
<li class="divider"></li>
<li>
<%= link_to "Sign out", signout_path, method: 'delete' %>
</li>
</ul>
</li>
<% else %>
<li><%= link_to "Sign in", signin_path %></li>
<% end %>
</ul>
</nav>
</div>
</div>
</header>
Try:
<%= current_user.name %>

Resources