Headers

The header at the top of the page should have the ORNL logo displayed in the upper left-hand corner. The “two-line stacked” version of the logo is preferred. You can find this and other alternate logos on the Logos page.  Additional ORNL approved logos can be found on the ORNL Brand Guidelines site.

Navigation should be handled on a section just below the top bar.

Here is an example of a possible header:

 

 

Resources

Code



<header class="site-header" role="banner">
        <nav class="navbar navbar-default " role="navigation">
            <div class="container">
                <div class="row">
                    <div class="site-navigation-inner col-sm-12">
                        <div class="navbar-header">
                            <div class="logo">
                                <a href="http://www.ornl.gov">
                                <img src="https://standards.ornl.gov/wp-content/uploads/2017/09/ORNL-white.png" alt="Website Standards">
                            </a>
                            </div>
                        </div>
                        <div class="site-title nav navbar-nav">
                            <a href="#home-link">
                            Optional Site Name
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <div class="secondary">
            <nav class="navbar  secondary-nav" role="navigation">
                <div class="container">
                    <div class="row">
                        <div class="site-navigation-inner col-sm-12">
                            <div>
                                <ul id="menu-main-menu" class="nav navbar-nav">
                                    <li id="menu-item-98" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-98"><a href="http://localhost/standards">Home</a></li>
                                    <li id="menu-item-203" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-203"><a href="http://localhost/standards/requirements/">Item 1</a></li>
                                    <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://localhost/standards/test-page/">Item 2</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </header>

CSS

  

      * {
            box-sizing: border-box;
        }

        body {
            margin: 0px;
            font-size: 16px;
            line-height: 1.7;
        }

        a:hover {
            background-color: #fda500;
        }

        .container {
            width: 1170px;
            margin-right: auto;
            margin-left: auto
        }

        .row {
            margin-right: -15px;
            margin-left: -15px;
        }

        .logo {
            float: left;
        }

        .site-title {
            float: right;
        }
        
        .site-title a {
            color: #fff;
            text-decoration: none;
            line-height: 75px;
            font-size: 22px;
        }

        .navbar.navbar-default {
            background-color: #1d722d;
            min-height: 75px;
        }

        .nav {
            padding-left: 0;
            margin-bottom: 0;
            list-style: none
        }

        .nav>li {
            position: relative;
            display: block
        }

        .secondary-nav .navbar-nav>li>a {
            color: #1d722d;
            line-height: 40px;
            text-transform: uppercase;
            font-size: 12px;
        }

        nav.navbar.secondary-nav {
            background: white;
            min-height: 40px;
        }

        .secondary-nav .navbar-nav>li>a:hover {
            background: transparent;
            color: #fda500;
        }

        .nav.navbar-nav {
            float: right;
        }

        .navbar-nav>li>a {
            text-transform: uppercase;
            padding: 0;
            display: inline-block;
            position: relative;
            text-decoration: none;
        }

        .secondary-nav .navbar-nav>li>a {
            color: #007833;
            line-height: 40px;
            font-size: 1.1em;
        }

        .container {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto
        }

        .row {
            margin-right: -15px;
            margin-left: -15px
        }

        .col-sm-12 {
            position: relative;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px
        }

        .nav {
            padding-left: 0;
            margin-bottom: 0;
            list-style: none
        }

        .nav>li>a {
            position: relative;
            display: block;
            padding: 0 10px 0 15px;
        }

        .navbar {
            position: relative;
            min-height: 50px;
        }

        .navbar-nav {
            margin: 7.5px -15px float: left;
            margin: 0
        }

        .navbar-nav>li {
            float: left
        }
        
        .home-link {
            color:#fff;
        }

        .container:after,
        .container:before,
        .row:after,
        .row:before {
            display: table;
            content: " "
        }

        .container:after,
        .row:after {
            clear: both
        }