Github and Website Workshop/header

From OpenHatch wiki

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

HTML

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

  • 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

  • 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

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

CSS challenge

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

Retrieved from "https://wiki.openhatch.org/wiki/Github_and_Website_Workshop/header?oldid=15961"