I have had these issues with my navbar and can't find what am I doing wrong. In the beginning, I just took out the code for the toggle and the link for the About page would be where it should; on the right-hand side of my navbar. Now I got to the point where I need the hamburger nav menu, so I have to add the toggle code, but then the link to my About page disappears completely and there is no toggle either. The second issue is the appearance of the little bar on the left side of my logo.
Screenshot of the page:
My code:
<!DOCTYPE html>
<html>
<head>
<title>Saasapp</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:400,700,800" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-
turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track':
'reload' %>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class='container'>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to root_path, class: "navbar-brand" do %>
<i class="fas fa-users"></i> DevMatch
<% end %>
</div>
<div class="collapse navbar-collapse navbar-right" id="navbarNav">
<ul class="navbar-nav">
<li>
<%= link_to "About", about_path, id:
"navbar-right" %>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
<%= yield %>
</body>
</html>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav navbar-right">
<li>
<%= link_to "About", about_path, id: "navbar-right" %>
</li>
</ul>
</div>
The navbar-right class should be added to the ul instead of the div.
The toggle will show up if you make you screen smaller.
Related
so I'm a total newbie, please do bear with me.
I'm following a course online where the instructor shows navbar appearing on homepage root path but also on other pages like the posts page. I followed exactly his instructions, but for some reason the navbar which is a partial, is only appearing on the homepage but NOT on the posts page - the code for navbar is as follow and the code for the other pages are all on https://github.com/cheese1884/-mywebsite
Thanks, guys.
<div class='container'>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<%= link_to "LessonRoll", root_path, class: 'navbar-brand' %>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<%= link_to 'Home', root_path, class: 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Posts', posts_path, class: 'nav-link' %>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<% if current_user %>
<li class="nav-item dropdown">
<a class = "nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download">Admin Menu<span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="download">
<%= link_to "App Settings", app_setting_path(#app_setting), class: 'dropdown-item' %>
<div class="dropdown-divider"></div>
Link
</div>
</li>
<% end %>
</ul>
<ul class="nav navbar-nav ml-auto">
<% if !current_user %>
<li class="nav-item">
<%= link_to "Sign Up", new_user_registration_path, class: 'nav-link' %>
</li>
<li><%= link_to "Log In", new_user_session_path, class: 'nav-link' %>
</li>
<% else %>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download"><%= current_user.username if current_user %> <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="download">
<%= link_to "Edit Profile", edit_user_registration_path, class: 'dropdown-item' %>
<div class="dropdown-divider"></div>
<%= link_to "Log Out", destroy_user_session_path, method: :delete, class: 'dropdown-item' %>
</div>
</li>
<% end %>
</ul>
</div>
</nav>
</div>
In your yeti.html.erb, you need to put the navbar outside the yield section:
<body>
<%= render partial: 'navbar' %> <!-- or code for navbar -->
<div>
<%= yield %>
</div>
</body>
Edit : multiple layouts explaination
Rails uses a simple convention to find the correct layout for your
request. If you have a controller called ProductsController, Rails
will see whether there is a layout for that controller at
layouts/products.html.erb. If it can't find a layout specific to your controller, it'll use the default layout at app/views/layouts/application.html.erb.
(source)
In your case you can add a custom layout such as yeti.html.erb and specify your PostsController to use this layout with layout 'yeti'
Why the navbar is appearing on homepage but not on post page (original question)
Because as i answered above, you need to add the navbar partial inside the yeti.html.erb layout same as you did in the application.html.erb layout.
Why the navbar design is different
Because in application layout you link the application.scss stylesheet which only imports bootstrap (here)
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
In the yeti layout, you link yeti/theme_manifest.scss as stylesheet which imports both "bootstrap" and the overriding "theme" (here)
<%= stylesheet_link_tag 'yeti/theme_manifest', media: 'all', 'data-turbolinks-track': 'reload' %>
I hope this will help you to see more clearly.
As a Rails newbie, I am running into an issue in which I am struggling to figure out.
Im rendering a header universally across the four pages of my application which consists of home, about, (signup and signin which are administered through devise).
The header is fine across the home and about pages, however in the devise pages the logo image specifically arrives broken yet all of the other elements appear in tact. Any help would be appreciated.
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>SampleApp</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => false %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>
<%= csrf_meta_tags %>
<%= yield :head %>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,700|Lobster' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-#{name}") %>
<% end %>
<%= yield %>
</div>
<%= render "layouts/footer" %>
</body>
</html>
_header.html.erb
<nav class="navbar navbar-static-top navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img alt="Nippon Beauty" class="navbar-brand-icon" src="assets/nippon.svg"><span class="logo-tagline">.CO.UK</span>
</a>
</div>
<input type="text" class="searchTerm" placeholder="What type of Skincare product would you like?">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Login", new_user_session_path %></li>
<li><%= link_to "Signup", new_user_registration_path %></li>
<% if user_signed_in? %>
<li><%= link_to "Account Settings", edit_user_registration_path %></li>
<li><%= link_to "Log out", destroy_user_session_path, method: :delete %></li>
<% else %>
<% end %>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
That's the problem with how you set the path to your logo. Making it absolute or better use image_tag.
<img src="/assets/nippon.svg" ...
Notice, I've added / (forward slash) before assets.
A better way of doing it would be:
<%= image_tag('nippon.svg', alt: "Nippon Beauty", class: "navbar-brand-icon") %>
I am putting together a basic website from One Month Rails and can't seem to figure out how to get the navigation bar to show at the top. I have spent a few hours and would like to go to the community. Here is the code from the _header.html.erb (using bootstrap sass)
<div class="navbar navbar">
<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>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<%= link_to 'Home', root_path %>
</li>
<li>
<%= link_to 'About', about_path %>
</li>
</ul>
<ul class="nav pull-right">
<li><%= link_to 'Login', '#' %></li>
</ul>
</div>
</div>
</div>
</div>
Here is the code from the application.html.erb tab:
<!DOCTYPE html>
<html>
<head>
<body>
<title>One Month Rails</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= tag :meta, name: "viewport", content: "width=device-width, initial-scale=1.0" %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
You seem to have some HTML errors in application.html.erb. But most modern browsers will fix those errors for you when loading the page. Here's a better version:
<!DOCTYPE html>
<html>
<head>
<title>One Month Rails</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= tag :meta, name: "viewport", content: "width=device-width, initial-scale=1.0" %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
You should also make sure your _header.html.erb is in app/views/layouts/.
Finally, don't forget to add bootstrap's css file to app/assets/stylesheets/.
Before you go to website, I want you too look for this. You will notice when the website loads, the first second or two... it display the links in the navbar in a list format, and looks buggy... bc when it finishes loading it looks alright.
website: www.powerliftingbasics.com
This happens every time you refresh/load the page. I use ruby on rails with twitter bootstrap.
I can't figure it out.
here is my navbar code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<img src="assets/logosmall.png" alt="Small Logo">
<a class="brand navfont" href="/">Powerlifting Basics</a>
<div class="container nav-collapse">
<ul class="nav pull-right">
<li><%= link_to "Bench Press", "/benchpress" %></li>
<li><%= link_to "Deadlift", "/deadlift" %></li>
<li><%= link_to "Squat", "/squat" %></li>
<li><%= link_to "Equipment", "/equipment" %></li>
<li class="dropdown">
more<b class="caret"></b>
<ul class="dropdown-menu">
<li class="divider"></li>
<li><%= link_to "Subscribe", "/subscribe" %></li>
<li> Contact Us </li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
In your layouts/application.html.erb
add application.css and application.js at the top
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>PowerLiftingBasics</title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
</head>
<body>
<%= yield %>
</body>
</html>
It happens cause you placed link to your css files at bottom of page. You should load it before page body. At least, put
<link href="/assets/application-65943938be14c000984bcb9478d30563.css" media="all" rel="stylesheet" type="text/css">
inside <head></head> tags.
The best practice is to place css and favicon links in head of page. Javascripts links place at bottom of body (before closing </body> tag).
I have a home page where I want to display a div in a certain way that it will require to be in the top of the application view.
Div is classed as "HOME-BANNER"
I am attempting to create an IF ELSE statement to reflect hiding the div if it is not on the home page.
My question is how do I call the current page in order to identify it as the home view's index. Also would I end the code or do I place an else statement to continue the rest of the page?
<html>
<head>
<title>WEBSITE</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<% if current_page == "home#index" %>
<div class="HOME-BANNER">
<% end %>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
WEBSITE
<ul class="nav">
<li><%= link_to "All Jobs", jobs_path %></li>
<li><%= link_to "My Profile", tempers_path %></li>
</ul>
<div class="float-right">
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i></a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> My Profile</li>
<li class="divider"></li>
<li><i class="icon-th-large"></i> Dashboard</li>
<li><i class="icon-th-list"></i> My Posts</li>
<li><i class="icon-th-list"></i> My Searches</li>
<li><i class="icon-stop"></i> <%= link_to ' Sign out', destroy_user_session_path, :method => :delete %></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= yield %>
</div>
<div class="footer"></div>
</body>
</html>
You want to do this from your controller. Since this is a localized event, use the controller that specifically hosts this View and not your application controller.
def whatever_view_this_is
#home_banner = true
end
Then in your view :
<% if #home_banner %>
<div class="HOME-BANNER">
<% end %>