Github and Website Workshop/header

From OpenHatch wiki
Jump to navigation Jump to search

Welcome to Challenge 6 of the Github and Website Workshop - creating a fixed navigation bar!

The goal of this challenge is to creating a fixed navigation bar (follows you as you scroll) with the title of your site and links

GH-Website-Mockup1.png

HTML[edit]

We want all the HTML code for this component to be inside a <header> tag which is nested inside <body>

<body>
	<header>
		<!-- header component here -->
	</header>
</body>

There are two parts of this HTML:

1. the header title

2. links

Therefore, we want to wrap each of these parts in separate HTML tags


HTML challenge 1[edit]

  • For the header title, let’s create a
    with the id called header-title.
  • What would you expect when you click on a header? (It’s a good idea to make the header title a link to index.html)

Solution code


We want to make the navigation part - luckily there's a <nav> tag! We should place the links in a <nav> (in the <header> tag, after the header title div)

Often when we put links in a navigation bar, we'll make an unordered list to hold the links then style the list to look the way we want.


HTML challenge 2[edit]

  • Put links to some section of your website in a <nav> tag and organize the links hierarchically using an unordered list.
  • We suggest the following pages, but feel free to come up your own ideas: About, Portfolio, Resume
  • The urls can be empty strings for now, but see if you can set up "Resume" to link to your resume! (hint: put it in the same folder as index.html)

Solution code


CSS[edit]

If you refresh index.html, you will notice that it looks hella basic. Let’s fix this with some CSS!

CSS challenge[edit]

Get <header> to be a fixed bar and look nice.

Add the following styles to the header element:

  • background-color
  • full width
  • fixed height (whatever you like)
  • z-index
    • We want the bar to overlap the rest of the content
    • by default HTML elements have a z-index of 1
    • z-index: 2 gives our header priority over default elements
  • position: fixed
    • This makes the header not move when we scroll the rest of the page - it will always be stuck at the top of the page

Solution code


The next task is to get <div id=”header-title”> and <nav> on the same line.

  • This is accomplished using “display: inline-block” - by default, HTML elements have “display: block” meaning there are line breaks between elements
  • We also want
    to “float” to the left and <nav> to “float” to the right on the same line

div#header-title {
  display: inline-block;
  float: left; 
}

nav {
  display: inline-block;
  float: right;
}

Challenge: try adding more space around the text in in the div#header-title and nav

  • Hint: use the padding property


If you refresh index.html, you will notice that the links are still formatted using bullets. With CSS we can get rid of that styling!

  • We only want to remove default styling for unordered lists under <nav> and not elsewhere
  • We can specify this by accessing only <ul> and <li> for a nav parent

Add the following styles:

nav ul {
  padding: 0; /* Get rid of padding */ 
  margin: 0; /* Get rid of margin */ 
}

nav li {
  display: inline-block; /* We want the links to appear on the same line */
}

Challenge: add spacing between each link or <li>

  • Hint: use the margin property

Challenge: create a style for the links

  • Hint: use “nav a:link”, “nav a:visited”, and “nav a:hover”
  • Tip: setting “text-decoration: none” gets rid of the underline that shows up by default on a link


Save the changes and reload index.html. When you’re satisfied, commit and push the changes.

Next: Challenge 7