I have come across multiple threads discussing this topic, but I am struggling to identify where I am going wrong.
The website I am currently working on for testing purposes is located at:
My goal is to ensure that the navbar stays fixed at the top of the page, with the image-containing div covering the space above the fold. Following that, I want to display additional div(s) and the footer, which should always remain at the bottom of the page when there isn't enough content to fill the entire height.
Below is a snippet of my coding from application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/menu' %>
<% flash.each do |message_type, message| %>
<div class="container alert alert-<%= message_type %>"><%= message %></div>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
</body>
<%= debug(params) if Rails.env.development? %>
</html>
Next, here is the code snippet from home.html.erb:
<header>
<div class="header-content">
<div class="header-content-inner">
<h1>This is TwitterDave</h1>
<hr>
<h2>
A big THANK YOU to
<a href="http://www.railstutorial.org/" target="_blank">Ruby on Rails Tutorial</a>
for making this possible ;)
</h2>
<%= link_to "Sign up now!", signup_path, class: "btn btn-primary btn-xl" %>
</div>
</div>
</header>
This section showcases the code from the footer partial _footer.html.erb:
<footer class="footer">
<div class="container">
<copyright>
© Twitterdave <%= Time.now.year %>
</copyright>
<nav>
<ul>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", contact_path %></li>
<li><a href="http://news.railstutorial.org/">News</a></li>
</ul>
</nav>
</div>
</footer>
Lastly, we have the code snippet from the menu partial -menu.html.erb:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 "twitterdave", root_path, class: "navbar-brand", id: "logo" %>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "Help", help_path %></li>
<!-- User Authentication Handling -->
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
In addition, here are some relevant CSS styles:
@import "bootstrap-sprockets";
@import "bootstrap";
/* mixins, variables, etc. */
$gray-medium-light: #eaeaea;
@mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* universal */
html {
position: relative;
min-height: 100%;
}
body {
margin-top: 51px;
margin-bottom: 100px;
}
section {
overflow: auto;
}
...
footer {
...
}
footer a {
...
}
footer copyright {
...
}
footer ul {
...
}
That concludes my initial attempt at customizing Michael Hartl's Ruby on Rails tutorial's sample app... Any assistance or guidance would be greatly appreciated! :)