Primary Navigation Complete
-
<nav class="c-primary-nav c-priority-nav" role="navigation"> <ul class="c-primary-nav__list c-priority-nav__list"> <li class="c-primary-nav__list-item has-subnav"> <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base "> Leadership Certification </a> <span class="c-subnav__arrow o-arrow--down u-path-fill--gray"></span> <ul class="c-primary-nav__subnav c-subnav"> <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light"> <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Assistant to the President for Evangelism</a> </li> <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light"> <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Global Mission</a> </li> <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light"> <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Mission Spotlight</a> </li> <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light"> <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Church Mission Offerings</a> </li> </ul> <!-- /.c-primary-nav__subnav --> </li> <li class="c-primary-nav__list-item has-subnav"> <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base "> Service </a> <span class="c-subnav__arrow o-arrow--down u-path-fill--gray"></span> <ul class="c-primary-nav__subnav c-subnav"> <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light"> <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Life Hope Centers</a> </li> <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light"> <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Global Mission</a> </li> <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light"> <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Mission Spotlight</a> </li> <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light"> <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Church Mission Offerings</a> </li> </ul> <!-- /.c-primary-nav__subnav --> </li> <li class="c-primary-nav__list-item "> <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base this-is-active"> Beliefs </a> </li> <li class="c-primary-nav__list-item "> <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base "> World Church </a> </li> <li class="c-primary-nav__list-item "> <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base "> Information </a> </li> <li class="c-primary-nav__list-item has-subnav"> <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base "> News </a> <span class="c-subnav__arrow o-arrow--down u-path-fill--gray"></span> <ul class="c-primary-nav__subnav c-subnav"> <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light"> <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 1</a> </li> <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light"> <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 2</a> </li> <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light"> <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 3</a> </li> <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light"> <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 4</a> </li> </ul> <!-- /.c-primary-nav__subnav --> </li> </ul> <!-- /.c-primary-nav__list --> </nav> <!-- /.c-primary-nav -->{% if primary_nav %} <nav class="c-primary-nav c-priority-nav" role="navigation"> <ul class="c-primary-nav__list c-priority-nav__list"> {% for item in primary_nav.items %} <li class="c-primary-nav__list-item {% if item.subnav %}{{ ' has-subnav' }}{% endif %}"> <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base {% if item.is_active %}this-is-active{% endif %}"> {{ item.text }} </a> {% if item.subnav %} <span class="c-subnav__arrow o-arrow--down u-path-fill--gray"></span>{% endif %} {% if item.subnav %} <ul class="c-primary-nav__subnav c-subnav"> {% for sub_item in item.subnav.items %} <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light"> <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="{{ sub_item.url }}">{{ sub_item.text }}</a> </li> {% endfor %} </ul> <!-- /.c-primary-nav__subnav --> {% endif %} </li> {% endfor %} </ul> <!-- /.c-primary-nav__list --> </nav> <!-- /.c-primary-nav --> {% endif %}