Help with adding a navigation bar?

Question

I am trying to add a navigation bar inside my head tag all the way to the right. I have the logo and title in the head tag and want to place the nav bar there too, but I cannot get it to place in the head tag it keeps placing it below it.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
  <link href="home.css" rel="stylesheet">
  <title>Video Tracker</title>
  <h1>Video Tracker<img class="title_img" src="http://images.clipartpanda.com/film-clipart-Movie-Clip-Art-1344.jpg"></h1>
</head>

<body>
  <div id="wrapper">
    <div class="upload">
      <a href="upload.html">
        <img class="upload_img" alt="Upload Video" src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/256/Misc-Upload-Database-icon.png">
        <p>Upload Video</p> 
      </a>
    </div>
    <div class="edit">
      <a href="">
        <img class="edit_img" alt="Edit Video Info" src="http://static.allmyapps.com/data/apps/17/3/17347/15ed03a4472131f35d7dc9637ddaa00b_video_editor_icon.png">
        <p>Edit Video Info</p>
      </a>
    </div>
    <div class="delete">
      <a href="">
        <img class="delete_img" alt="Delete Video" src="http://icons.iconarchive.com/icons/creative-freedom/shimmer/256/Delete-icon.png">
        <p>Delete Video</p>
      </a>
    </div>
  </div>
</body>

</html>

body {
  background-color: silver;
}

h1 {
    color: maroon;
    background-color: silver;
    padding-left: 10px;
    font-family: 'Rock Salt', cursive;
    font-size: 35px;
    border-bottom: solid 5px black;
}

#wrapper {
  margin: 200px auto 0;
  height: 300px;
  width: 1050px;
}

.title_img {
  height: 50px;
  width: 60px;
  padding-left: 5px;
  padding-top: 5px;
  background-color: silver;
}

.upload, .edit, .delete {
  width: 314px;
  padding: 0 18px;
  float: left;
  text-align: center;
}

.upload_img, .edit_img, .delete_img {
  height: 155px;
  width: 155px; 
}

Answer 1 · 2017-03-07T08:45:09Z

March 7, 2017 8:45am

The <head> element is a container for metadata. It contains things like encoding info, page title, and links to stylesheets. Structural elements that you wish to see on the page, such as <h1> and <nav> belong inside the <body> tag.

If you like, you can use a <header> tag inside the body to house elements that you wish to be part of the site's header.

For example:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
  <link href="home.css" rel="stylesheet">
  <title>Video Tracker</title>
</head>

<body>
<header>
  <h1>Video Tracker<img class="title_img" src="http://images.clipartpanda.com/film-clipart-Movie-Clip-Art-1344.jpg"</h1>
  <nav>Your nav bar goes here.</nav>
</header>
...
...
</body>

Answer 2 · 2017-03-09T00:40:05Z

March 9, 2017 12:40am

<head> tag is used for diferent purposes, like having your scripts and stylesheets.

What you need is a <header> tag, Remember all the structure you need to show on the front end is placed inside the <body> tag. So place your header inside.

A basic structure is :

<html>
<head>
</head>
<body>
   <header></header>
   <content></content>
   <footer></footer>
</body>
</html>

Welcome to the Treehouse Community

Looking to learn something new?

Roger Dailey

Roger Dailey

Help with adding a navigation bar?

2 Answers

Stuart Wright

Stuart Wright

David Alberto Mogollon

David Alberto Mogollon