Add Top Navbar to all pages

Add a `styles.css` page

Transfer all the styles from your pages to one page named styles.css
Add all the code below to the styles.css page
- These are the styles for your navbar

 /* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

Add a link to each page that calls the `styles.css` page

<!DOCTYPE html>
<html>
  <head>
      <title>Hi</title>
      <link rel="stylesheet" type="text/css" href="styles.css">

      all your other code...

Add Navbar to your index page and Add Links to all your pages

Place this block of links at the top of your index.html file
Add links to all your pages
Style it the way you want it
Then copy and paste this same block of links to all of your other pages
Move the active class (class="active") to the page that you are on.

  <body>
    <div class="topnav">
      <a class="active" href="index.html">Home</a>
      <a href="animals.html">Favorite Animals</a>
      <a href="music.html">Music</a>
      <a href=""></a>
      <a href=""></a>
      <a href=""></a>
    </div>

    all your other code...

Run your Git Workflow

git init
git status
git add
git status
git commit -m 'Add Navbar to all pages'
git status

Lorem Ipsum

http://rubywithjendiamond.blogspot.com/2014/06/lorem-ipsum.html

https://robots.thoughtbot.com/css-animation-for-beginners https://github.com/daneden/animate.css

Center something

```css .center { display: block; margin-left: auto; margin-right: auto; width: 50%; } ```

reusable navbar

My navigation bar is in the body tag. Entire code for navigation bar is in nav.html file (without any html or body tag, only the code for navigation bar).

In the target page, this goes in the head tag:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Then in the body tag, a container is made with an unique id and a javascript block to load the nav.html into the container, as follows:

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->

jendiamond/navbar.md