Hi, I have a css animation that I would like to have displayed on my WordPress header; however, when I do integrate it, it wont do the animation, it will just stay still. The first code is my attempt at integrating the css animation into my WordPress header, the second code is the working css animation. <?php /* * The Header theme template. * * @package WordPress * @subpackage HappyKids * @since HappyKids v.3.0 */ global $post; global $is_IE; $gen_sets = theme_get_option('general', 'gen_sets'); $menu_merged = isset($gen_sets['_menu_type']) ? $gen_sets['_menu_type'] : ''; $toggle_sidebar = isset($gen_sets['toggle-area']) ? $gen_sets['toggle-area'] : ''; $show_top_panel = false; $_mobile_menu = $gen_sets['_mobile_menu'] == true ? 'touch_detect_on' : 'touch_detect_of'; ?> <!DOCTYPE html> <html <?php language_attributes(); ?> class="<?php echo $_mobile_menu; ?>"> <head> <link rel="stylesheet" type="text/css" href="/wp-content/themes/happykids/assets/css/style.css"> <link rel="stylesheet" type="text/css" href="/wp-content/themes/happykids/assets/css/grass.css"> <script type="text/javascript" src="/wp-content/themes/happykids/Javascript/jquery-1.7.2.min.js"></script> <script src="/wp-content/themes/happykids/assets/js/device.min.js"></script> <script src="/wp-content/themes/happykids/assets/js/hoverIntent.js"></script> <script src="/wp-content/themes/happykids/assets/js/jquery.parallax.js"></script> <script src="/wp-content/themes/happykids/assets/js/main3af6.js?dt=05/15/2017"></script> <!-- end script --> <!-- DMS:MAST:Homepage --> </head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <?php show_favicon(); put_ganalytics_code(); if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); wp_head(); ?> </head> <?php if ( is_front_page() || is_home() ) : ?> <body <?php body_class( array('kids-front-page', show_skin()) ); ?>> <?php else : ?> <body <?php body_class( array('secondary-page', show_skin()) ); ?>> <?php endif; ?> <?php if ( function_exists('dynamic_sidebar') && is_active_sidebar($toggle_sidebar)){ ?> <!-- HEADER BEGIN --> <div class="top-panel"> <div class="l-page-width clearfix"> <div class="wrapper"> <?php dynamic_sidebar($toggle_sidebar); $show_top_panel = true; ?> </div> </div> </div><!--/ .top-panel--> <?php } ?> <div class="kids-bg-level-1"> <div class="bg-level-1"></div> <header id="kids_header"> <header> <body class="withAnimation"> <!-- header --> <div class="parallax-viewport" id="parallax"> <!-- parallax layers --> <div class="parallax-layer cloud1"> <img src="/wp-content/themes/happykids/assets/images/cloud3.png" alt=""/> </div> <div class="parallax-layer cloud2"> <img src="/wp-content/themes/happykids/assets/images/cloud2.png" alt=""/> </div> <div class="parallax-layer cloud3"> <img src="/wp-content/themes/happykids/assets/images/cloud2.png" alt=""/> </div> <div class="parallax-layer cloud4"> <img src="/wp-content/themes/happykids/assets/images/cloud1.png" alt=""/> </div> <div class="parallax-layer cloud5"> <img src="/wp-content/themes/happykids/assets/images/cloud1.png" alt=""/> </div> <div class="parallax-layer cloud6"> <img src="/wp-content/themes/happykids/assets/images/cloud1.png" alt=""/> </div> </div> <nav class="navbar navbar-default yamm" role="navigation"> <div class="container"> <div class="sun rotate"> <img src="/wp-content/themes/happykids/assets/images/sun.png" alt=""> </div> </header> <div class="l-page-width clearfix"> <ul class="kids_social"> <?php if ($show_top_panel) { echo ('<li class="openbtn"><a href="#"></a></li>'); } if ( cws_is_wpml_active()){ echo "<li class='lang_bar'>"; do_action('icl_language_selector'); echo "</li>"; } show_social(); show_search_bar(); ?> </ul><!-- .kids_social --> <div class="kids_clear"></div> <?php show_logo(); ?> <nav id="kids_main_nav" <?php if($menu_merged) echo('class="merged" '); position_menu(); ?> > <div class="menu-button"> <span class="menu-button-line"></span> <span class="menu-button-line"></span> <span class="menu-button-line"></span> </div> <?php $menu_locations = get_nav_menu_locations(); if (isset($menu_locations['primary-menu']) ){ wp_nav_menu( array( 'after' => '', 'before' => '', 'theme_location' => 'primary-menu', 'container' => '', 'menu_class' => '', 'menu_id' => 'menu-main', 'items_wrap' => '<ul id="%1$s" class="clearfix flexnav %2$s" data-breakpoint="800"'.position_menu_ul_fix().'>%3$s</ul>' ) ); } else { echo '<h6 style="color:red;background-color:#fff;padding:10px;font-size:18px;margin: -6px 0 0;">Please assign the main menu: Appearance -> Menus -> Manage Locations</h6>'; } ?> </nav><!-- #kids_main_nav --> </div><!--/ .l-page-width--> </header><!--/ #kids_header--> <!-- HEADER END --> Code (markup): <head> <link rel="stylesheet" type="text/css" href="admin/code/assets/css/style.css"> <link rel="stylesheet" type="text/css" href="admin/code/assets/css/grass.css"> <script type="text/javascript" src="admin/code/Javascript/jquery-1.7.2.min.js"></script> <script src="admin/code/assets/js/device.min.js"></script> <!-- DMS:MAST:Homepage --> </head> <header> <body class="withAnimation"> <!-- header --> <div class="parallax-viewport" id="parallax"> <!-- parallax layers --> <div class="parallax-layer cloud1"> <img src="admin/code/assets/images/cloud3.png" alt=""/> </div> <div class="parallax-layer cloud2"> <img src="admin/code/assets/images/cloud2.png" alt=""/> </div> <div class="parallax-layer cloud3"> <img src="admin/code/assets/images/cloud2.png" alt=""/> </div> <div class="parallax-layer cloud4"> <img src="admin/code/assets/images/cloud1.png" alt=""/> </div> <div class="parallax-layer cloud5"> <img src="admin/code/assets/images/cloud1.png" alt=""/> </div> <div class="parallax-layer cloud6"> <img src="admin/code/assets/images/cloud1.png" alt=""/> </div> </div> <nav class="navbar navbar-default yamm" role="navigation"> <div class="container"> <div class="sun rotate"> <img src="admin/code/assets/images/sun.png" alt=""> </div> <script src="admin/code/assets/js/hoverIntent.js"></script> <script src="admin/code/assets/js/jquery.parallax.js"></script> <script src="admin/code/assets/js/main3af6.js?dt=05/15/2017"></script> <!-- end script --> </div></header> </body> </html> Code (markup):
All of the markup is a mess, you have meta outside of the first closing head, then another closing head, then two body tags, then some random stuff with a nav that you don't close. I'm surprised its working at all nevermind the animation. You need to remove the code you have added to your template and start again.. Don't just add tags in anywhere, for example the body tag should be : <?php if ( is_front_page() || is_home() ) : ?> <body <?php body_class( array('withAnimation', 'kids-front-page', show_skin()) ); ?>> <?php else : ?> <body <?php body_class( array('withAnimation', 'secondary-page', show_skin()) ); ?>> <?php endif; ?> PHP: Do this, instead of just adding another body tag and expecting it to work.