tbennett · September 18, 2022 04:25
diff --git a/header-demo b/header-demo
 <!--
  An example of how one might setup the HTML for a site header complete with
  a meta nav and main site navigation. Source order could be changed, but I consider 
  the H1 and main nav more important than the meta nav, so that's how I ordered things.

  Styles are added just to give an impression as to how this might be set up
  visually.
 -->
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .site-header {
            border: solid;
            position: relative;
            padding-top: 2.5rem;
        }

        .site-header-logo {
            width: 300px;
            height: 150px;
        }

        .site-header-tagline {
            display: block;
        }

        .main-nav {
            padding-top: .5rem;
            background: #ddd;
        }

        .nav-lnk,
        .main-nav-links,
        .main-search-body {
            display: inline;
        }

        .nav-lnk {
            margin-right: .5rem;
        }

        #home .home,
        #about .about,
        #products .products,
        #faq .faq,
        #contact .contact {
            color: red;
        }

        .main-search {
            display: inline;
        }

        .meta-nav {
            position: absolute;
            text-align: right;
            width: 100%;
            height: 2.5rem;
            top: 0;
            right: 0;
            background: #ccc;
        }
    </style>
 </head>


 <body id="home">

    <header class="site-header">

        <h1 class="site-header-title">Widgco Widgets Inc.</h1>
        <h2 class="site-header-tagline">
            Spacely Sprockets Ain't Got Nuthin' On Us!
        </h2>
        <nav class="main-nav">
            <ul class="main-nav-links">
                <li class="nav-lnk"><a class="home" href="#">Home</a></li>
                <li class="nav-lnk"><a class="about" href="#">About</a></li>
                <li class="nav-lnk"><a class="products" href="#">Products</a></li>
                <li class="nav-lnk"><a class="faq" href="#">FAQ</a></li>
                <li class="nav-lnk"><a class="contact" href="#">Contact</a></li>
            </ul>
        </nav>

        <nav class="meta-nav">
            <a class="nav-lnk" href="#" title="">forums</a>
            <a class="nav-lnk" href="#" title="">sign-in</a>

            <form class="main-search" action="search.php" method="get">
                <fieldset class="main-search-body">
                    <label for="search">search/label>
                    <input type="text" name="search" placeholder="product name or sku" />
                    <input type="submit" value="GO" />
                </fieldset>
            </form>
        </nav>

    </header>

    <main></main>
    <footer></footer>

 </html>