Seventh-Day Adventist Church

International Website Framework

Menu

Navigation

There are a handful of different navigation schemes you can use from the main navigation down to the simple sub navigation.

Main Navigation

The code example below is the very navigation used on this page. Take note of the class="active" to instantiate an active state on a nav element.

Example:

<header id="header">
  <div class="container">
    <h1 id="logo">
      <a href="#">Seventh-Day Adventist Church</a>
    </h1>
    <a href="#" id="mobile-menu">Menu</a>
    <nav>
      <a href="#">Spirituality</a>
      <a href="#" class="active">Vitality</a>
      <a href="#">Service</a>
      <a href="#">Beliefs</a>
      <a href="#">World Church</a>
      <a href="#">Information</a>
      <a href="#">News</a>
    </nav> <!-- End nav -->
    <div id="utility-nav">
      <a href="#" id="nav-lang">English</a>
        <ul id="language-picker" style="display: none;">
          <li><a href="#">English</a></li>
          <li><a href="#">Español</a></li>
          <li><a href="#">Français</a></li>
          <li><a href="#">Português</a></li>
        </ul>
      <a href="#">Sitemap</a>
      <a href="#">Find a Church</a>
      <a href="#">Contact</a>
      <form id="site-search">
        <input type="text" placeholder="Search..." />
      </form>
      <a href="#" id="mobile-search-link">Search</a>
    </div> <!-- End #utility-nav -->
  </div>
</header> <!-- End header -->

You can display the main navigation without the white background for use over a large image, as seen on the homepage. To do this, you need to change the ID on the header element from id="header" to id="home".

<header id="home">
  <div class="container">
    ...
  </div>
</header> <!-- End header -->

Sub Navigation

It is important to note that a page with sub navigation has to include the sub navigation twice. This is because we can not repurpose the original sub navigation for use on a mobile device, so we need to include a seperate mobile sub nav on the page.

The mobile sub navigation should come after the #title and before the #content elements.

Example:

<div id="right-callout-content">
  <a href="#">Submit a News Story</a>
  <a href="#">Overview, Mission, and Method</a>
  <a href="#">News Policies</a>
  <a href="#">Styleguide</a>
  <a href="#">News Contact Information</a>
  <hr>
  <a href="#" class="ico-twitter">Twitter</a>
  <a href="#" class="ico-facebook">Facebook</a>
  <a href="#" class="ico-flickr">Flickr</a>
  <a href="#" class="ico-youtube">YouTube</a>
  <a href="#" class="ico-rss">RSS Feed</a>
  <a href="#" class="ico-mobile">Smartphone Apps</a>
  <a href="#" class="ico-email">Email</a>
</div>

Alternative Sub Navigation

This is an alternative sub navigation that can be used. Note: this navigation can only handle so many navigation items before the content will start to spill outside of the designated area.

In order to accomodate for a mobile view, you also need to include a <select> with the navigation elements to display in mobile view.

Example:

<div id="sub-nav">
  <div class="container">
    <a href="#">Home</a>
    <a href="#">About Us</a>
    <a href="#">Press</a>
    <a href="#">Photos</a>
    <a href="#">Events</a>
    <select id="sub-nav-mobile">
      <option>Home</option>
      <option>About Us</option>
      <option>Press</option>
      <option>Photos</option>
      <option>Events</option>
    </select>
  </div> <!-- End .container -->
</div> <!-- End #sub-nav -->

You can easily override this sub navigation color by adjusting some simple CSS. To override, navigate to /-/css/style.css and find the code labeled Sub Navigation Override. There you can adjust the Hex values for the color of the navigation bar and links.

/* Sub Nav Override */
/*
/* Uncomment this code and change these hex
/* values to override the sub navigation colors.
/*

#sub-nav { background: #f9b000; }

#sub-nav a { color: #fffaf4; }

#sub-nav a:hover { color: #7f590f; }

*/

Utility Navigation

This utility navigation can be used as a language dropdown or any other type of secondary navigation.

Example:

<header>
  <nav>...</nav>
  <div id="utility-nav">
    <a href="#language-picker" id="nav-lang">English</a>
    <a href="#">Sitemap</a>
    <a href="#">Find a Church</a>
    <a href="#">Contact</a>
    <ul id="language-picker" style="display: none;">
      <li><a href="#">English</a></li>
      <li><a href="#">Español</a></li>
      <li><a href="#">Français</a></li>
      <li><a href="#">Português</a></li>
    </ul>
  </div> <!-- End #utility-nav -->
</header>

There is an important piece of Javascript that is necessary for the dropdown to function. That code is as follows:

// Toggle Language Dropdown
$('#nav-lang').on('click', function(e){
  e.preventDefault();
  $('#language-picker').toggle();
});

Footer Navigation

This is the navigation that is listed down in the footer area..

Example:

<footer>
  <div class="container">
    <div id="footer-top">
      <div class="footer-links">
        <a href="#">Facebook</a>
        <a href="#">Twitter</a>
        <a href="#">YouTube</a>
        <a href="#">Email</a>
        <a href="#">Feedback</a>
      </div> <!-- End .footer-links -->
      <p>Adventist.org is the Official website of the Seventh-day Adventist world church <a href="#">Change Region</a></p>
    </div> <!-- End #footer-top -->
    <div id="footer-bottom">
      <div class="footer-links">
        <a href="#">Trademark and Logo Usage</a>
        <a href="#">Legal Notice</a>
      </div>
      <p>Copyright © 2013, General Conference of Seventh-day Adventists</p>
      <p>12501 Old Columbia Pike, Silver Spring, MD 20904, USA 301-680-6000</p>
    </div> <!-- End #footer-bottom -->
  </div> <!-- End .container -->
</footer> <!-- End footer -->