1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help integrating css animation onto header

Discussion in 'HTML & Website Design' started by usermaster, May 16, 2017.

  1. #1
    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.
    SEMrush


    <?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):
     
    usermaster, May 16, 2017 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    First off, you gave two <body>, which obviously won't work...
     
    PoPSiCLe, May 17, 2017 IP
  3. GameO.Over

    GameO.Over Active Member

    Messages:
    45
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    65
    #3
    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.
     
    GameO.Over, May 17, 2017 IP
  4. Rokis

    Rokis Member

    Messages:
    60
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    45
    #4
    Just another wordpress website
     
    Rokis, May 20, 2017 IP
    GameO.Over likes this.