I am currently using the free version of neve on a local server and I am trying to make my sticky header responsive based on the scroll.

The text is responding correctly and becoming smaller, however the logo is not shrinking. Outside of the javascript function, I can make it resize by changing the class in developer options but not responsive to the scroll.

Any help is appreciated!

Additional CSS

.header.shrink {
  font-size: 13px;
  position: fixed; 
    z-index:999999;
  top: 0;
  width: 100%;
  transition: 0.2s;
}

.site-logo.shrink img{
    max-height: 45px;
}

functions.php

<script>
jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 10) { 
            $('header').addClass('shrink');
        $('site-logo').addClass('shrink');
        }
        else{
            $('header').removeClass('shrink');
        $('site-logo').removeClass('shrink');
        }
    });
});
</script>

Style.css

.site-logo {
  align-items: center;
  display: flex;
  padding: 10px 0;
}

.site-logo amp-img img {
  max-height: 60px;
}

.site-logo .brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.site-logo .title-with-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.site-logo .title-with-logo > img:first-child, .site-logo .title-with-logo > div:first-child {
  margin-right: 10px;
}

.site-logo h1, .site-logo p {
  font-family: inherit;
  font-size: 1.25em;
  margin-bottom: 0;
  font-weight: 600;
}

.site-logo small {
  width: 100%;
  display: block;
}


.site-logo a {
  color: #404248;
  display: inline;
}

.site-logo a:hover {
  color: #404248;
  text-decoration: none;
  opacity: .9;
}

I am currently using the free version of neve on a local server and I am trying to make my sticky header responsive based on the scroll.

The text is responding correctly and becoming smaller, however the logo is not shrinking. Outside of the javascript function, I can make it resize by changing the class in developer options but not responsive to the scroll.

Any help is appreciated!

Additional CSS

.header.shrink {
  font-size: 13px;
  position: fixed; 
    z-index:999999;
  top: 0;
  width: 100%;
  transition: 0.2s;
}

.site-logo.shrink img{
    max-height: 45px;
}

functions.php

<script>
jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 10) { 
            $('header').addClass('shrink');
        $('site-logo').addClass('shrink');
        }
        else{
            $('header').removeClass('shrink');
        $('site-logo').removeClass('shrink');
        }
    });
});
</script>

Style.css

.site-logo {
  align-items: center;
  display: flex;
  padding: 10px 0;
}

.site-logo amp-img img {
  max-height: 60px;
}

.site-logo .brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.site-logo .title-with-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.site-logo .title-with-logo > img:first-child, .site-logo .title-with-logo > div:first-child {
  margin-right: 10px;
}

.site-logo h1, .site-logo p {
  font-family: inherit;
  font-size: 1.25em;
  margin-bottom: 0;
  font-weight: 600;
}

.site-logo small {
  width: 100%;
  display: block;
}


.site-logo a {
  color: #404248;
  display: inline;
}

.site-logo a:hover {
  color: #404248;
  text-decoration: none;
  opacity: .9;
}

• css
• javascript
• theme-customizer

• Do you have a max-height set on .site-logo without the .shrink class? – Tony Djukic Commented May 20, 2020 at 4:04
• In the "customize" view, the max-width is set to 75px as default (imgur/a/G35etXj) – Greg Stoltz Commented May 20, 2020 at 18:14
• So is it declared inline then or in a CSS class? – Tony Djukic Commented May 20, 2020 at 18:15
• Honestly Im not sure, I posted a picture above – Greg Stoltz Commented May 20, 2020 at 18:17
• I also added the references to .site-logo from my style sheet above – Greg Stoltz Commented May 20, 2020 at 18:22

1 Answer 1

So there's two things we need to look out for here. We have to first make sure we specify to jQuery/javascript what it is that we're selecting. In this code you are targeting the HTML header element and then also targeting 'site-logo' but jQuery can't find an element named 'site-logo'.

<script>
jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 10) { 
            $('header').addClass('shrink');
        $('site-logo').addClass('shrink');
        }
        else{
            $('header').removeClass('shrink');
        $('site-logo').removeClass('shrink');
        }
    });
});
</script>

The solution requires you to specify what it is you're targeting and since 'site-logo' is a class, you have to preface it with a period, like so:

<script>
jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 10) { 
            $('.header').addClass('shrink');
            $('.site-logo').addClass('shrink');
        }
        else{
            $('.header').removeClass('shrink');
            $('.site-logo').removeClass('shrink');
        }
    });
});
</script>

As some pages may have multiple <header> elements, I'd strongly suggest that you also either target a specific class or ID for your main header unless you want them all to have the 'shrink' class applied when scrolling.

The other thing and I'm not sure if this was an issue or not, is that when you're using CSS transitions, you have to go from value X to value Y. So if your .shrink class is setting max-height:45px, you should make sure the other class specifies a starting point for the same rule, like max-height:75px.

.site-logo img {
  max-height: 75px;
  -webkit-transition:max-height 1s ease-out;
  -moz-transition:max-height 1s ease-out;
  -o-transition:max-height 1s ease-out;
  transition:max-height 1s ease-out;
}
.site-logo.shrink img {
  max-height: 45px;
}