dan/windycoys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ensure layout is correct when nav__body is empty

Browse Source
This commit is contained in:
Dan Head
2018-12-21 20:55:26 +00:00
parent 426eef8051
commit cd1faceaf1
2 changed files with 44 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
css/nav.css
View File

@@ -44,6 +44,10 @@
top: 32px; top: 32px;
} }
.nav__body {
flex-grow: 1;
}
.nav__title { .nav__title {
font-family: var(--heading-font-family); font-family: var(--heading-font-family);
font-size: 2.5rem; font-size: 2.5rem;
@@ -118,10 +122,6 @@
top: -10000px; top: -10000px;
} }
.nav__menu {
flex-grow: 1;
}
/** /**
* nav List * nav List
*/ */

74
theme/partials/navigation.php
View File

@@ -7,41 +7,47 @@
<span class="menu__text">Open menu</span> <span class="menu__text">Open menu</span>
</button> </button>
<div class="nav__content"> <div class="nav__content">
<h2 class="nav__title"> <div class="nav__head">
<a class="nav__title-link" href="<?php get_site_url() ?>/" aria-label="Back Home" tabindex="-1"> <h2 class="nav__title">
<span class="nav__title-link-icon"> <a class="nav__title-link" href="<?php get_site_url() ?>/" aria-label="Back Home" tabindex="-1">
<svg class="icon icon--extra-large"> <span class="nav__title-link-icon">
<use xlink:href="#icon-windy"></use> <svg class="icon icon--extra-large">
<use xlink:href="#icon-windy"></use>
</svg>
</span>
<img src="<?php echo get_template_directory_uri(); ?>/images/icon.png" alt="WindyCOYS logo" class="nav__title-link-image" data-load-transition="false">
</a>
</h2>
</div>
<div class="nav__body">
<?php wp_nav_menu(array(
menu => 'navigation',
container_class => 'nav__menu',
menu_class => 'nav__list',
walker => new Windycoys_Walker_Navigation()
)); ?>
</div>
<div class="nav__foot">
<div class="nav__social">
<a class="nav__social-link" href="https://www.facebook.com/WindyCOYS/">
<svg class="icon icon--large">
<use xlink:href="#icon-facebook"></use>
</svg> </svg>
</span> </a>
<img src="<?php echo get_template_directory_uri(); ?>/images/icon.png" alt="WindyCOYS logo" class="nav__title-link-image" data-load-transition="false"> <a class="nav__social-link" href="https://twitter.com/windycoys/">
</a> <svg class="icon icon--large">
</h2> <use xlink:href="#icon-twitter"></use>
<?php wp_nav_menu(array( </svg>
menu => 'navigation', </a>
container_class => 'nav__menu', </div>
menu_class => 'nav__list', <div class="nav__search">
walker => new Windycoys_Walker_Navigation() <?php get_search_form() ?>
)); ?> </div>
<div class="nav__social"> <button class="nav__close">
<a class="nav__social-link" href="https://www.facebook.com/WindyCOYS/"> <span class="nav__close-bar"></span>
<svg class="icon icon--large"> <span class="nav__close-bar"></span>
<use xlink:href="#icon-facebook"></use> <span class="nav__close-text">Close menu</span>
</svg> </button>
</a>
<a class="nav__social-link" href="https://twitter.com/windycoys/">
<svg class="icon icon--large">
<use xlink:href="#icon-twitter"></use>
</svg>
</a>
</div> </div>
<div class="nav__search">
<?php get_search_form() ?>
</div>
<button class="nav__close">
<span class="nav__close-bar"></span>
<span class="nav__close-bar"></span>
<span class="nav__close-text">Close menu</span>
</button>
</div> </div>
</nav> </nav>