before mobile search checkpoint

This commit is contained in:
Ross Trottier 2024-05-30 12:42:32 -06:00
parent 92b78e9eb5
commit 3ac79dfc92
2 changed files with 33 additions and 10 deletions

View File

@ -27,15 +27,16 @@
<div class="container slowtwitch-desktop-header"> <div class="container slowtwitch-desktop-header">
<div class="row"> <div class="row">
<div class="ten columns"> <div class="ten columns">
<div class="row text-logo-header"> <div class="row text-logo-header hide-mobile">
<img class="slowtwitch-logo-header" src="/wp-content/themes/slowtwitch-wp/assets/images/txt-logo.svg" alt="slowtwitch logo"> <img class="slowtwitch-logo-header" src="/wp-content/themes/slowtwitch-wp/assets/images/txt-logo.svg" alt="slowtwitch logo">
<p>Subscribe</p> <p>Subscribe</p>
</div> </div>
<div class="row flex-row"> <div class="row flex-row">
<img class="slowtwitch-logo-header" src="/wp-content/themes/slowtwitch-wp/assets/images/logo.svg" alt="slowtwitch logo"> <img class="slowtwitch-logo-header hide-mobile" src="/wp-content/themes/slowtwitch-wp/assets/images/logo.svg" alt="slowtwitch logo">
<img class="slowtwitch-ad-header" src="/wp-content/themes/slowtwitch-wp/assets/images/ad-mock.jpg" alt="ad mock"> <img class="slowtwitch-mobile-text-logo" src="/wp-content/themes/slowtwitch-wp/assets/images/txt-logo.svg" alt="slowtwitch logo">
<img class="slowtwitch-ad-header hide-mobile" src="/wp-content/themes/slowtwitch-wp/assets/images/ad-mock.jpg" alt="ad mock">
</div> </div>
<div class="row flex-row-right"> <div class="row flex-row-right hide-mobile">
<img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/twitter.svg" alt="twitter logo"> <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/twitter.svg" alt="twitter logo">
<img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/vimeo.svg" alt="vimeo logo"> <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/vimeo.svg" alt="vimeo logo">
<img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/facebook.svg" alt="facebook logo"> <img class="slowtwitch-logo-social" src="/wp-content/themes/slowtwitch-wp/assets/images/facebook.svg" alt="facebook logo">
@ -47,8 +48,10 @@
<img src="/wp-content/themes/slowtwitch-wp/assets/images/search.svg"> <img src="/wp-content/themes/slowtwitch-wp/assets/images/search.svg">
</button> </button>
</div> </div>
</form>
</div> </div>
</div> </div>
<label for="open-btn" class="menu-open-btn"><i class="fa fa-bars" aria-hidden="true"></i></label>
<div class="two columns desktop-tag-logos"> <div class="two columns desktop-tag-logos">
<div class="row"> <div class="row">
<img src="/wp-content/themes/slowtwitch-wp/assets/images/swim-lrg.svg" alt="swim"> <img src="/wp-content/themes/slowtwitch-wp/assets/images/swim-lrg.svg" alt="swim">
@ -70,7 +73,7 @@
'menu' => 'primary', 'menu' => 'primary',
'container' => '', 'container' => '',
'theme_location' => 'primary', 'theme_location' => 'primary',
'items_wrap' => '<input type="radio" name="slide" id="open-btn"><input type="radio" name="slide" id="cancel-btn"><ul class="nav-links" id="test"><label for="cancel-btn" class="menu-cancel-btn"><i class="fa fa-remove" aria-hidden="true"></i></label>%3$s</ul><label for="open-btn" class="menu-open-btn"><i class="fa fa-bars" aria-hidden="true"></i></label>' 'items_wrap' => '<input type="radio" name="slide" id="open-btn"><input type="radio" name="slide" id="cancel-btn"><ul class="nav-links" id="test"><label for="cancel-btn" class="menu-cancel-btn"><i class="fa fa-remove" aria-hidden="true"></i></label>%3$s</ul>'
) )
); );
?> ?>

View File

@ -11,6 +11,15 @@
font-family: Oswald; font-family: Oswald;
} }
.hide-desktop {
display: none;
}
.slowtwitch-mobile-text-logo {
display: none;
margin-top: 15px;
}
.slowtwitch-desktop-header { .slowtwitch-desktop-header {
width: 100%; width: 100%;
} }
@ -164,6 +173,7 @@ nav {
#open-btn { #open-btn {
display: none; display: none;
margin-left: 5px;
} }
#cancel-btn { #cancel-btn {
@ -239,7 +249,17 @@ nav {
background-color: #0b4fa0; background-color: #0b4fa0;
} }
.slowtwitch-desktop-header { .desktop-tag-logos img {
display: none; display: none;
} }
} }
@media screen and (max-width: 550px) {
.hide-mobile {
display: none;
}
.slowtwitch-mobile-text-logo {
display: block;
}
}