Large logo before scroll on mobile

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
@media ( max-width: 768px ) {
    /* set text to display after scroll */
    body .mobile-header-navigation.is_stuck {
        content: "Mutt Hutt";
        color: #FAFAFA;
        padding-left: 10px;

    /* reset a width to fix Safari bug */
    body .mobile-header-navigation.is_stuck a {
        width: 30px;

    /* set logo size before scroll */
    body .mobile-header-navigation:not(.is_stuck) img {
        height: 120px;
        margin-top: 70px;

This technique was implemented on