Footer with mega menu

Organize sub menu with menu_item_parent.

Thumbnail

// <footerNav>
.uk-background-primary
  p.uk-text-center.text-white.uk-padding-default-top
    a(href='#top' uk-scroll)
      img.text-white(src='img/icon-backtotop.svg' uk-svg)
  .uk-container.uk-padding
    // <nav>
    .uk-grid-match.grid-divider-first.uk-margin-medium-bottom(uk-grid class='uk-child-width-1-5@m uk-child-width-1-2')
      each i in footer
        each j in i.nav
          div
            section
              h3.text-medium.uk-text-bold.text-white(style='letter-spacing: 1.8px; margin-bottom: 25px;')=j.title
              ul.uk-list()
                each k in j.navItems
                  li.uk-margin-default-bottom
                    a.text-small.text-white.link-secondary(href=k.href style='letter-spacing: 1.4px')=k.text
    // </nav>
    hr.uk-margin-remove(style='border-color:#2e586c')
    // <navPolicy>
    nav.uk-navbar-container.uk-flex-wrap(uk-navbar="")
      .uk-navbar-left
        ul.uk-navbar-nav.navbar-divider
          each i in footer
            each j in i.navPolicy
              li
                a.text-white.link-secondary(href=j.href style='letter-spacing: 1.6px;')=j.title
      .uk-navbar-right
        ul.uk-navbar-nav
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:facebook;ratio:1.2')
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:twitter;ratio:1.2')
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:linkedin;ratio:1.2')
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:youtube;ratio:1.2')
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:pinterest;ratio:1.2')
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:google;ratio:1.2')
    // </navPolicy>
    hr.uk-margin-remove(style='border-color:#2e586c')
    // <copyRight>
    .uk-flex.uk-padding-small.uk-padding-default-top.uk-padding-remove-bottom.uk-flex-middle.uk-flex-wrap(class='uk-flex-between@s uk-flex-center')
      a(href='#')
        img(src='img/logo.jpg')
      p.uk-display-block(class='uk-hidden@s' style='width:100%;') &nbsp;
      p.uk-text-right.text-white.text-xsmall(class='uk-text-right@s uk-text-center') Copyright © Pools Corp. All rights reserved.
    // </copyRight>
// </footerNav>
.footer {
  .uk-navbar-container {
    padding: 62px 0;
    @include mq-m{
      padding: 30px 0;
    }
  }
  .uk-navbar-container:not(.uk-navbar-transparent) {
    background: transparent;
  }
  .uk-navbar-nav>li>a {
    min-height: auto;
    padding:0 26px;
    @include mq-s{
      padding: 0 10px;
    }
    @include mq(375px){
      font-size: rem(12px);
    }
  }
  .uk-navbar-right{
    .uk-navbar-nav>li>a {
      padding: 0 11px;
    }
  }
  @include mq-s {
    .uk-navbar-left,
    .uk-navbar-right {
      margin-left: auto;
      margin-right: auto;
    }
  }
}

<div class="uk-grid-match grid-divider-first uk-margin-medium-bottom uk-child-width-1-5@m uk-child-width-1-2" uk-grid="">
  <?php foreach(wp_get_nav_menu_items('footer') as $nav): ?>
  <?php if($nav->menu_item_parent === '0'): ?>
  <div>
    <section>
      <h3 class="text-medium uk-text-bold" style="letter-spacing: 1.8px; margin-bottom: 25px;">
        <a class="text-white" href="<?php echo esc_attr($nav->url); ?>"><?php echo esc_attr($nav->title); ?></a>
      </h3>
      <ul class="uk-list text-white">
        <?php foreach(wp_get_nav_menu_items('footer') as $i): ?>
        <?php if($i->menu_item_parent != 0 && $nav->ID == $i->menu_item_parent): ?>
        <li class="uk-margin-default-bottom"><a class="text-small text-white link-secondary" href="<?php echo $i->url; ?>" style="letter-spacing: 1.4px"><?php echo $i->title; ?></a></li>
        <?php endif; ?>
        <?php endforeach; ?>
      </ul>
    </section>
  </div>
  <?php endif; ?>
  <?php endforeach; ?>
</div>

Tags: