There appears to be more than one way to change the background. This page utilized in-line class and style elements whe defining the [body] tag. This makes sense as it is something that applies to the whole body. If not defined in the body tag, you can also use the style element in the header as seen on James MG page.

Sidebar/menu - page links are easier to visualize in a container, however the default menu was getting stuck. You probably should revisit the original template as the menu orignally worked. You probably deleted part of the javascript code. Think about static side bar. Make sure you have a way to close menu on small and large screens.

Leave the block or divider and the javascript for an animated or closing menu. Remember, part of the script needs to remain in the HEAD. I will note the original instructin to hide the "font awesome x" was removed [w3-hide-large]. However, the original three-bar menu was replaced with the one now in use. Also, full blocks often start and end with [div] and [/div] respecitvely. You can also use these divider tags to color a particular section.

We arbitrailly called this section "#midpage" to show you how to make midpage point to the correct spot. Do you see that I did it again? There are actually two spepare links to the teal paragraph above. The links or [a href=]'s should be obvious. The part that I kept missing is the [h4 id=] or [h2 id=]. You are placing the id as a normal header atribute like a class or style. So, then - the link will point to the header or tag with that id. In other words, the link may come first (in menus or other navigational aids). Then, you match it to the correct id for you destination or 'pagemark.' Or, you are defining/declaring the id at the place that it actually occurs. This can be done at the [p] paragraph level too... (as we did for this paragraph). However, let us try to keep our indexing simple.

HTML Header (this is a good place to note - the CSS HEAD and HTML header are different elements). Or rather - the HEAD contains CSS elemts that are not seen by the end user but effect the body. The HEADER is the stuff that you see at the top of the page: menus, titles, etc. Also, that cool menu that we just made has elements BEFORE and AFTER the HEAD. This makes sense as some things [code, scripts, functions, etc] are not 'seen.' And, some things [the visual elements] are seen. Having one seemingly stray line does make it harder to decide where to delete the above menu. Oh well, leave it AND use the 'header' menu below. This begs the question, is it really necessary to place some elements of that menu in the header or is that a style convention

Paragraph 8

This tutorial taught you how to link text and buttons [the a hrefs=] to another place on the same page using [id="midpage"] and [id="p3"] statements placed inside of headers. You can right click (non-standard mouse button for you lefty's) and view this pages' source html. Or, you can download it at text file here. There are annotations and notes that not shown by the browser. Notably, there are several pieces of html that are in [square brackets] instead of [angle] brackets so that you can read them in your browser. Otherwise, these pieces of html would do their function in the background and conceptually you may not know what I am talking about. Specifically, this is the case with [a href="#midpage"] points to [h4 id="#midpage"]. And, [a href="#para7"] points to [h5 id="#para7"] . It does not matter if you use h1,h2,h3,h4,h5 - those are just heading styles. But, you want to define your [id=] in that tag - so that your link has a place to refrence.

This page includes a working, animated sidenav menu

Click on the 3-bar element also known as [#9776] to open the side navigation menu. Click the X on the menu to close it.

☰ Release, the menu