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
*/ */

6
theme/partials/navigation.php
View File

@@ -7,6 +7,7 @@
<span class="menu__text">Open menu</span> <span class="menu__text">Open menu</span>
</button> </button>
<div class="nav__content"> <div class="nav__content">
<div class="nav__head">
<h2 class="nav__title"> <h2 class="nav__title">
<a class="nav__title-link" href="<?php get_site_url() ?>/" aria-label="Back Home" tabindex="-1"> <a class="nav__title-link" href="<?php get_site_url() ?>/" aria-label="Back Home" tabindex="-1">
<span class="nav__title-link-icon"> <span class="nav__title-link-icon">
@@ -17,12 +18,16 @@
<img src="<?php echo get_template_directory_uri(); ?>/images/icon.png" alt="WindyCOYS logo" class="nav__title-link-image" data-load-transition="false"> <img src="<?php echo get_template_directory_uri(); ?>/images/icon.png" alt="WindyCOYS logo" class="nav__title-link-image" data-load-transition="false">
</a> </a>
</h2> </h2>
</div>
<div class="nav__body">
<?php wp_nav_menu(array( <?php wp_nav_menu(array(
menu => 'navigation', menu => 'navigation',
container_class => 'nav__menu', container_class => 'nav__menu',
menu_class => 'nav__list', menu_class => 'nav__list',
walker => new Windycoys_Walker_Navigation() walker => new Windycoys_Walker_Navigation()
)); ?> )); ?>
</div>
<div class="nav__foot">
<div class="nav__social"> <div class="nav__social">
<a class="nav__social-link" href="https://www.facebook.com/WindyCOYS/"> <a class="nav__social-link" href="https://www.facebook.com/WindyCOYS/">
<svg class="icon icon--large"> <svg class="icon icon--large">
@@ -44,4 +49,5 @@
<span class="nav__close-text">Close menu</span> <span class="nav__close-text">Close menu</span>
</button> </button>
</div> </div>
</div>
</nav> </nav>