CREATING A SIMPLE NAVBAR IN RAILS
Here is an outline of how to create a simple Navigation Bar using CSS in a Rails application.
Step 1: Where The HTML Files Will Be
Before we start creating the navbar and styling it, we have to first ensure we have the correct set-up.
A navigation bar’s main purpose is to be accessed on any page of a site to ensure easy navigation. To have the navbar shown on every HTML page, we cannot just copy and paste our nav bar code into each page. This would be tedious, take more space, and would go against the DRY (don’t repeat yourself) principle.
To make life easier, we want to place our nav bar code in one area that will automatically render it to all pages. This will be in our application.html.erb file found within our “layouts” folder.
However, we do not actually want to explicitly write our code here, rather we want to simply render it in the application.html.erb file. To do this, we want to create a second file in our “layouts” folder called “_navbar.html.erb”. The filename does not really matter, as long as you start the file with an underscore, and it ends in .html.erb.
Once that is complete, we can now head back to our Application.html.erb file and locate the first “body” tag, and place this line right underneath it:
<body>
<%= render “layouts/navbar[←insert your file name]” %>
<%= yield %>
…
</body>
We want to make sure we are using embedded ruby notation to perform ruby commands in our HTML file.
A command you may not recognize is the “yield” keyword. This keyword is responsible for rendering the thing we called before it. So in this case, yield is rendering the contents of our navbar file.
Step 2: Where The CSS Files Will Be
now that we have determined where our nav bar will be created, it’s time to locate where we will work on our CSS.
Let’s navigate to “assets/images/stylesheets/application.css”
In this “application.css” file, we will write create styling for our HTML.
If for some reason you do not have this file, you can simply create a “CSS” folder on the same level as your “app”, “config”, and “bin” folders. In that CSS folder, create a file called style.css. This is where you will create all your CSS.
Now that we have the basic formatting set up, we are now ready to dive into the HTML side of things.
Step 3: Create The HTML Structure
In our “_navbar.html.erb” file, we want to start building out the HTML of our navbar.
There are many, many different ways to create a navigation bar, so here is a basic way to set one up when you are just starting out.
There are a couple of important things to note about this set-up. Each tag listed: header, div class=, nav, ul, and li are all able to be individually styled using CSS. We will take a deeper look at this in the next section…but before that, let’s take a look at how our nav bar looks now without any CSS!
Step 4: Transforming a List Into a Navbar Using CSS
As we can see in the screenshot of our CSS file below, there are many, many different CSS Selectors and Properties (a whole screenshot of the final CSS result will be attached at the end).
To further clarify what our CSS file is showing, it is useful to look at the tags in the attached photo back in Step 3. In that photo, you can see that everything is first wrapped in a <header> tag, then a <div class=>, then <nav>, then <ul>, and lastly <il>.
With these tags in mind, let’s look at the screenshot above again, and we will notice some patterns.
The nav ul{…} is referring to the entire unit of all the <li>’s together. The nav ul{} notation is referring to that chunk. We can verify this by checking out Chrome Dev Tools Inspector.
Now that is confirmed, we can now anticipate what the rest of these elements mean in the CSS file. They are referring to each layer of compartments within our HTML (<header>, <div class= “”>,<nav>, etc). This is significant because it will allow us more flexibility when trying to alter the look and feel of each chunk of HTML.
Let’s take another look at our HTML screenshot. We will notice that on line 2 we have a “<div class= ‘container’>” which essentially is defining a class called “container”.
If we refer to our final CSS file (below in the resources), the very first thing we see is “.container {…}”. When a particular selector starts with a “.” this means it is a CSS class.
A CSS class selector is used when looking to perform the same style changes on many of the same selectors
For example, if I knew that I wanted every <h1> tag to have a background of black, white text, Arial font, 12px size, and I want it italicized, I would create a class in my CSS file called “.h1_container”.
Then I would go back to our navbar.html.erb file, and wrap every single <h1> tag in my HTML file (refer back to screenshot in Step 3) with <div class= “h1_container”>
Conlusion
I did not outline every single CSS property found in the final CSS file located in the resources because they are either pretty self-explanatory, or they are easily google-able to figure out. I hope this was a good enough guide to help you understand the larger picture, as well as the general flow of creating a navigation bar in your rails application.
To learn more about CSS, executing a navigation bar, and other topics covered in this article, I have attached several great resources that influenced and inspired this article below (underneath the large screenshot).
Resources:
