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">
Related
The collapsed navbar for mobile versions will not open. The website is www.insaka.org. This is the navbar code. I could have sworn it was working last time I checked it, but now it is not. Any ideas?
<div class="container">
<nav class="navbar navbar-expand-md fixed-top navbar-dark">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<%= render 'layouts/navigation_links' %>
<% render 'layouts/nav_links_for_auth' %>
</ul>
<div>
Donate
</div>
<div>
<img class="featurette-image img-fluid mx-auto img-responsive max-width:25px height:auto" src="../images/blue insaka logo.jpg">
</div>
</div>
</nav>
If you check for javascript errors in the console you will find the problems:
popper.min.js
bootstrap.min.js
holder.min.js
These three js files could not be found.
I am a new learner and I am confused using bootstrap code in rails, here is the example of the code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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 "MARKET", root_path, class: "navbar-brand",id: "logo"%>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<% if user_signed_in? %>
<li><%= link_to "create doc", new_detail_path%></li>
<li><%= link_to "Signout", destroy_user_session_path, method: :delete %></li>
else
<li><%= link_to "login", new_user_session_path%></li>
<% end %>
</ul>
</div>
</div>
</nav>
I know the user part ul is wrong, I don't know how to use bootstrap in rails.
Is there any tutorial to learn bootstrap with rails because I am really confused to use bootstrap in rails.
Here the article how to integrate bootstrap in rails app:
https://launchschool.com/blog/integrating-rails-and-bootstrap-part-1
I am trying to add a header to the spree commerce website using deface. But the problem is logo is not getting loaded. I have tried the following ..
I have pasted the logo.png file in app/assets/images and in the config/initilazers/spree.rb
I have added config.logo = 'logo.png' in the block existing there.
This was not working, so I added logo.png in the vendor/assets/images.(I created the images folder)
This is the code I am having
Deface::Override.new(:virtual_path => 'spree/shared/_header',
:name => 'Tryint to replace the header',
:replace => 'div#spree-header',
:text => '
<div class="container">
<nav class="navbar navbar-fixed-top navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="logo.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>BIRTHDAY</li>
<li>ANNIVERSARY</li>
<li>WEDDING</li>
<li>CHRISTMAS</li>
<li>CORPORATES</li>
<li>STORE</li>
</ul>
</div>
</div>
</nav>
</div>
'
)
The above code file is present in the overrides/update_header.rb. It works fine except the logo does not show
I was using img tag in html, instead of using image_tag as in rails way. And it should be like this <%= image_tag("rails.png") %> where rails.png is in app/assets/images
I have strange error with images (never encountered it before).
This is screenshot of the main page - <%= render 'layouts/header %>
Nothing wrong there...
Now - I have put same code (<%= render 'layouts/header %>) into devise/sessions/new.html.erb and it does not read logos anymore.
(same happens with footer)
-> How to fix this?
-> How to prevent it in future?
I thought that rails will always load images the same way it does every time.
header.html.erb
<header id="home">
<div class="main-nav">
<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="index.html">
<h1><img class="img-responsive" src="assets/logo.png" alt="logo"></h1>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll active">Home</li>
</ul>
</div>
</div>
</div><!--/#main-nav-->
Fixed
Problem was that I should have used image_tag instead of standard html img src.
So:
This:
<img class="img-responsive" src="assets/logo.png" alt="logo">
Should be changed to this:
<%= image_tag("logo.png") %>
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).