More Elements

Here are some extra elements you can add to your website! For each of these examples, you'll need to replace certain HTML elements in your index.html file and certain rules style.css file.

Navigation Bar

Below are the code snippets to add the following navigation bar to your site.

This is the HTML snippet that should replace your current <header> tag in your index.html file:

          <header class="header">  <p>    Header  </p>  <nav>    <a></a> <!-- These invisible links are left blank to center the others! -->    <a href="/">Home</a>    <a href="/about">About</a>    <a></a> <!-- Another invisible link for formatting -->  </nav></header>
        

To style the nav bar correctly, you'll need to replace the rules for your .header class and add the new rules for the nav (nav bar), nav a (links inside the nav bar), and nav a:hover (links in the nav bar when a mouse is hovering over them) HTML elements.

These are the CSS rules that need to replace the current versions in the style.css file:

          .header {  text-align: center;  padding: 0px;  margin: 0px;} nav {  display: flex;  /* Allow children to be positioned with formatting */  justify-content: space-between;  /* Horizontally distribute children */  align-items: center;  /* Vertically align children */  width: 100%;  height: 2rem;  /* 1rem = computed font size (usually 16px) */  background: black;} nav a {  text-decoration: none;  font-weight: bold;  color: white;} nav a:hover {  color: orangered;}
        

Header Image

Below is the code to add a background image to the header of your site.

First you must download your image then add it to NeoCities! Once saved to your computer, upload it to your NeoCities Dashboard by creating a new folder called "assets" in your base directory next to your home page's HTML file. After the folder is created, upload your image into it.

To add your image, you won't need to change your HTML file (as long as you already did that in the previous step). Simply replace the rules for the .header class in your style.css file:

          .header {  display: flex;  align-items: flex-end;   height: 10rem;  background-image: url("/assets/NAME_OF_YOUR_IMAGE.png");  background-position-x: center;  background-position-y: center;}
        

Make sure you replace NAME_OF_YOUR_IMAGE.png with the actual name of your image! It might be a .gif or .jpg instead of a .png and that's okay!