Shrink header when scroll down

  • Hi,

    I tried to add a shrink header function when scrolling to my site by following the tutorial from this web:
    https://callmenick.com/post/animated-resizing-header-on-scroll

    I don’t if know if it is because of the web structure, the way showed in the tutorial doesn’t work. Perhaps it is the location difference of header? Since I noticed that there is no header tag in the index.php file, but having a get_header(); function and an external header.php file instead.

    So what should I do to implement the header shrink feature? I am new to web development so please forgive me if I can’t describe the problem clearly.

    Thanks a lot!

Viewing 3 replies - 1 through 3 (of 3 total)

  • to make that you should change header.php file. And need to know how navigation menus works on wordpress
    navigations menus

    sometimes when you only copy from tutorials something can be conflicted on css files. When I do this, I change the Html/CSS class’es and id’s.

    Thread Starter horace524

    (@horace524)

    Thanks for the reply Tiago!

    I now can resize my header when scroll, but problem is the logo image won’t resize together with header. I have edited my header html to the following:

    <header id="masthead" class="site-header" role="banner">
             <h1 id="logo">
    			<div class="site-logo" >
       				<a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'> <img src='<?php echo esc_url( get_theme_mod( 'gridsby_logo' ) ); ?>'<?php if ( get_theme_mod( 'logo_size' ) ) : ?> width="<?php echo esc_attr( get_theme_mod( 'logo_size' ), __( '145', 'gridsby' )); ?>"<?php endif; ?> alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a>
    			</div><!-- site-logo --> </h1>

            <h2 class="site-description" id="description"><?php bloginfo( 'description' ); ?></h2>
</header>

    I seems can’t point to my logo image in css when using header.smaller method. Any idea how to to make it work?

    Many thanks!

    you can add a property in css to resize logo only when the header has “smaller” class (used on example)

    .smaller > h1 > a > img{
  height:30px;
}

    if dosn’t work try to check the path of the logo img using css selectors:
    https://www.w3schools.com/cssref/css_selectors.asp

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Shrink header when scroll down’ is closed to new replies.