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%;') 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:
- menu
- /