Support » Theme: Twenty Fourteen » Change header background on scroll

Viewing 6 replies - 1 through 6 (of 6 total)
  • Dear friend,
    Can you post url of your website, it would be easier to see and try to resolve issue
    Thanks
    Cheers
    TR

    Thread Starter mikorka

    (@mikorka)

    @tahoe

    There is no website, I’m developing offline and using the theme Twenty Fourteen without any modification so far. There is no issue either, just wondering if the mentioned function could be implemented somehow for this theme. Appreciate for checking the official template files for the same.

    Hi Mikorka,
    1. you have to create child theme for your theme. Then Activate your child theme.
    2. you need to copy your header.php file to the child theme folder by FTP client
    3. then replace code in the child’s header.php with this code:

    <?php
    /**
     * The Header for our theme
     *
     * Displays all of the <head> section and everything up till <div id="main">
     *
     * @package WordPress
     * @subpackage Twenty_Fourteen
     * @since Twenty Fourteen 1.0
     */
    ?><!DOCTYPE html>
    <!--[if IE 7]>
    <html class="ie ie7" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 8]>
    <html class="ie ie8" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if !(IE 7) & !(IE 8)]><!-->
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->
    <head>
    	<meta charset="<?php bloginfo( 'charset' ); ?>">
    	<meta name="viewport" content="width=device-width">
    	<title><?php wp_title( '|', true, 'right' ); ?></title>
    	<link rel="profile" href="http://gmpg.org/xfn/11">
    	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    	<!--[if lt IE 9]>
    	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    	<![endif]-->
      	  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(window).bind('scroll', function() {
        var distance = 50;
        if ($(window).scrollTop() > distance) {
          $('.header-main').addClass('scrolled');
        }
        else {
          $('.header-main').removeClass('scrolled');
        }
      });
    });
    </script>
    	<?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
    	<?php if ( get_header_image() ) : ?>
    	<div id="site-header">
    		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    			<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
    		</a>
    	</div>
    	<?php endif; ?>
    
    	<header id="masthead" class="site-header" role="banner">
    		<div class="header-main">
    			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    
    			<div class="search-toggle">
    				<a href="#search-container" class="screen-reader-text" aria-expanded="false" aria-controls="search-container"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
    			</div>
    
    			<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
    				<button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
    				<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
    				<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
    			</nav>
    		</div>
    
    		<div id="search-container" class="search-box-wrapper hide">
    			<div class="search-box">
    				<?php get_search_form(); ?>
    			</div>
    		</div>
    	</header><!-- #masthead -->
    
    	<div id="main" class="site-main">

    4. Do the CSS

    These are very important steps to do:
    put this code to your Child Theme style.css file
    OR
    Install Simple Custom CSS plugin and put the code there.
    If you do not do css this way and put the code to themes style.css, you will loose all changes you made when you update your theme in the future.
    I’m doing this on my browser to find solution.
    It can get to some different behaviour on your site.
    It can happen that  it is not working.
    Then we have to look further.

    .header-main {
      transition:top 0.5s ease;
      box-shadow:0 0 10px black;
      transition: background-color 0.5s ease;
    }
    
    .scrolled {
      background: #bada55!important;
    }

    Cheers
    TR

    • This reply was modified 7 years, 5 months ago by Tahoerock.

    I did TEST on my testing server HERE
    It is working
    Cheers
    TR

    Thread Starter mikorka

    (@mikorka)

    Thanks, I tested and would have two questions:

    #1 What is the source file in the first script tag and why do we need it?

    “//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”

    As much as I understand, the second script tag contains one Javascript we need for this function. So I’m not sure why we have another script, but I noticed removing the first script eliminates the expected result.

    #2 I tried to implement your solution on a different way i.e. by creating an external js file in the child theme library containing your script:

    jQuery(document).ready(function(){
      $(window).bind('scroll', function() {
        var distance = 50;
        if ($(window).scrollTop() > distance) {
          $('.header-main').addClass('scrolled');
        }
        else {
          $('.header-main').removeClass('scrolled');
        }
      });
    });

    Then I added this code to my child functions.php:

    add_action('wp_enqueue_scripts', 'my_autosliding_tf_child');
    
    function my_custommenu_tf_child() {
    	if (!is_admin()) {
    	if (is_front_page()) {
    	wp_enqueue_script( 'my_Custommenu', get_stylesheet_directory_uri() . '/js/mycustommenu.js', '', '1.0', true );
    	}
    	}
    }

    Finally, I applied the same CSS you mentioned. However trying this way it did not work. Can you spot the error please?

    I’m pretty new in web development but really like to learn coding so your explanation is much appreciated:)

    Hi Mikorka,
    #1 What is the source file in the first script tag and why do we need it?
    it is link to JQuery CDN library. To execute jQuery on your site, it needs to know library.
    take a look to Codepen you pointed in at begining. go to settings and Java Scipt and there is that cdn link.

    #2 I tried to implement your solution on a different way i.e. by creating an external js file in the child theme library containing your script:
    When you do external js file, you have to tell in headers better footers, where that file is by linking it. HEADERS or FOOTERS in the child theme !!!
    Why footers?
    Because JS code will be executed as last one, that is good practice.

    You do not need any funtion.php for this!!!!
    Cheers
    TR

    • This reply was modified 7 years, 5 months ago by Tahoerock.
    • This reply was modified 7 years, 5 months ago by Tahoerock.
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Change header background on scroll’ is closed to new replies.