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).
Related
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.
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 want to have a navbar that collapses when I resize the screen, so I thought to use Bootstrap.
In the application.html.erb:
<body>
<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>
<a class="brand" href="#">Some Store</a>
<div class="nav-collapse">
<ul class="nav">
<li><%= link_to "Browse Products" %></li>
<li><%= link_to "Price List" %></li>
<li><%= link_to "Contact Us" %></li>
<li><%= link_to "Cart" %></li>
</ul>
</div>
</div>
</div>
</div>
In the Gemfile I have gem 'bootstrap-sass'
In the application.css.scss I wrote #import 'bootstrap;'
In the application.js I have //= require bootstrap
I don't understand why It doesn't work, I just copied from the bootstrap site
Your imports are correct, but your current markup is not. It doesn't match the markup and classes that I see in some of the examples. I first attempted to build from your markup while using the sticky footer with fixed navbar example in the bootstrap docs as a guide to get the markup to display properly. Here's how I adjusted your markup:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="#">Some Store</a>
</div> <!-- end div class="navbar-header" -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><%= link_to "Browse Products" %></li>
<li><%= link_to "Price List" %></li>
<li><%= link_to "Contact Us" %></li>
<li><%= link_to "Cart" %></li>
</ul>
</div> <!-- end div class="collapse navbar-collapse" -->
</div> <!-- end div class="container" -->
</div> <!-- end div class="navbar navbar-default navbar-fixed-top" -->
If you look closely, I swapped the locations of the divs with classes container and navbar-inner and changed the class to <div class="navbar-header"> that surrounds the collapse button. Then I had to change div surrounding the menu items to have class navbar-collapse instead of the nav-collapse that you had, otherwise the menu items disappear. In order for the button to work, I changed it from an <a> tag to a <button> tag as well as the data-target="navbar-collapse" attribute to correctly target the collapsible menu items. Once these changes were made, I had a functioning drop-down menu for window sizes < 768px.
And don't forget to add a style to your <body> tag for padding-top:51px; to guarantee your site content appears underneath the fixed navigation bar.
Hope that helps!
Chris
Please check your application.html.erb file in the header section add this
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1">
I have bought a twitter bootstrap theme from wrapbootstrap.
I already have a functional rails application. Now, I want to design my application by integrating the bootstrap theme into my application.
I am new to this and I have no idea how to do it. After doing a lot of research on this, I found only a very few discussion regarding this issue. As for example I found this post: Implementing WrapBootstrap theme into Rails App
But, I am not totally sure how the assets from the theme will be applied to my application. I have copied all the assets under my project's app/assets/images, app/assets/javascripts and app/assets/stylesheets folders from the theme's corresponding folders. Then, I got several error when I tried to run my app locally. I deleted my application.css file, after that it started working. But, I can not see any design from the theme being applied yet. What should I do to make this theme work into my rails app?
First check this screencast:
http://railscasts.com/episodes/328-twitter-bootstrap-basics
then I would add a bootstrap gem like bootstrap-sass, then add the JS files through the gem by adding them to the manifest, something like this:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
then i would get the css files that you bought from wrapboostrap and place them in you assets/stylesheets folder, then add the necesary markup and clases to your app this is how ive done it before.
hope it helps
EDIT:
Markup:
Check the template you downloaded, lets start with the navbar for example
Code from template:
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<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>
<div class="container">
<a class="brand" href="index.html">Gaia Business</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Service</li>
<li>FAQ</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul id="dropdown-menu" class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Dropdown 4</li>
<li>Dropdown 5</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!--/.container-->
</div><!-- /navbar-inner -->
</div>
</header><!--/header-->
Now you need to place yourself in your app, if the navbar shows in every view on your app, you should mention it on the layouts/application.html.erb something like this:
<!DOCTYPE html>
<html>
<head>
<title>Golden Green Chlorella</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render :partial => 'layouts/navbar' %>
<%= yield %>
</body>
</html>
and last, do your navbar partial
_navbar.html.erb:
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar glyph"></span>
<span class="icon-bar glyph"></span>
<span class="icon-bar glyph"></span>
</a>
<div class="container">
<%= link_to "Your app", root_path, :class => "brand" %>
<div class="nav-collapse">
<ul class="nav">
<li class=<%= current_page?(static_index_path) || current_page?(root_path) ? "active" : "" %> > <%= link_to (t "navbar.home"), root_path%></li>
<li class=<%= current_page?(static_know_path) ? "active" : "" %>> <%= link_to (t "navbar.know"), static_know_path%></li>
<li class=<%= current_page?(static_buy_path) ? "active" : "" %>> <%= link_to (t "navbar.buy"), static_buy_path%></li>
<li class=<%= current_page?(static_faq_path) ? "active" : "" %>> <%= link_to "FAQ", static_faq_path%></li>
<li class=<%= current_page?(static_contact_path) ? "active" : "" %>> <%= link_to (t "navbar.contact"), static_contact_path%></li>
<!-- <li class="active">Home</li> -->
</ul>
<ul class="nav pull-right">
<li><%= link_to "English", static_english_path%></li>
<li><%= link_to "Español", static_spanish_path%></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!--/.container-->
</div><!-- /navbar-inner -->
</div>
</header><!--/header-->
That was only for the navbar, now you need to do the rest, add the markup your template shows you to do, with all your app, its not an easy job, but thats how its done.
make sure that while installing twitter bootstrap you should add following gem into your Gemfile under "group :assets"
gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
then run bundle command.
Now, the theme "file_name.css" (file_name could be any) that u have downloaded just add it into "stylesheets" folder under app->assests->stylesheets
then open your application.css file in same folder there you will see
*= require_tree.
replace this line with
*= require "file_name.css"
NOTE: Don't forget to re-compile your assets or simply delete the content of your tmp/cache folder.
save it and reboot your server. it will apply your new theme.
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 %>