I increased the header height by 40% instead of the 30% Charis asked.
Increasing the logo by 30% wouldn't make the logo subtext much more readable. I didreduced the size of the search area under the nav by 30%.
padding-top: 1.25rem; }
header.main {
- height: 110px;
+ height: 154px;
padding: 10px 5px 10px; }
@media only screen and (min-width:0em) and (max-width:64em) {
header.main {
#search-wrapper {
background: url(../assets/repeating-hm-pg-search-bkgrd.jpg);
- padding: 105px 0 104px; }
+ padding: 66px 0 65px; }
#search-wrapper form.searchform {
position: relative;
max-width: 800px;
}
#search-wrapper {
background: url(../assets/repeating-hm-pg-search-bkgrd.jpg);
- padding: 105px 0 104px;
+ padding: 66px 0 65px;
form.searchform {
position: relative;
max-width: 800px;
header.main {
- height: 110px;
+ height: 154px;
padding: 10px 5px 10px;
@media #{$medium-down}{
height: auto;
<header class="main">
<div class="row large-collapse">
<div class="small-12 medium-6 columns">
- <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img alt="Charlevoix Public Library Where your imagination takes flight" src="<?php echo esc_url( get_template_directory_uri() );?>/assets/charlevoix-public-library.jpg"></a>
+ <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img alt="Charlevoix Public Library Where your imagination takes flight" src="<?php echo esc_url( get_template_directory_uri() );?>/assets/charlevoix-public-library-x1.jpg"></a>
</div>
<div id="nav-search" class="medium-6 columns show-for-medium-up">
<ul class="sec-navigation right">