This code does the following on mobile devices when using mobile header:
- sets logo to be larger than the container before scroll
- adds text after logo after scroll
- resets width of ‘a’ element to fix Safari bug
/* LARGE LOGO BEFORE SCROLL */
@media ( max-width: 768px ) {
/* set text to display after scroll */
body .mobile-header-navigation.is_stuck .site-logo.mobile-header-logo::after {
content: "Mutt Hutt";
color: #FAFAFA;
padding-left: 10px;
}
/* reset a width to fix Safari bug */
body .mobile-header-navigation.is_stuck .site-logo.mobile-header-logo a {
width: 30px;
}
/* set logo size before scroll */
body .mobile-header-navigation:not(.is_stuck) .site-logo.mobile-header-logo img {
height: 120px;
margin-top: 70px;
}
}This technique was implemented on mutthutt.ca