custom animated text header

  • WPuser_78

    (@wpuser_78)


    11 years, 1 month ago

    I have a situation trying to find a way to replace an existing .png logo with an animated logo text (originally made by RJ McCollam) in the header area without touching the menu buttons.

    The problem is that the theme have a pretty complex defined header style. At this point I am not so sure:

    1) which part of the <head> should I remove/edit in header.php;

    2) which part of the Header section of the style.css file, should I remove/edit after I’ll add the above mentioned css code;

    3) Also, the most tricky part, how can I inject/call the JavaScript code into the header.

    Header section looks like this:

    /*------------------------------------------------------------------
Header
*/
.header {
  height: auto;
  position: static;
  top: 0;
  left: 0;
  background: #fff;
  width: 100%;
  z-index: 101;
  line-height: 40px;
  padding: 15px 22px 15px 30px;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
@media only screen and (min-width: 40.063em) {
  .header {
    position: fixed;
    height: 80px;
    padding: 20px 60px;
  }
}
.header.row {
  max-width: 100%;
}
.header.style2 .logo {
  text-align: left;
}
@media only screen and (min-width: 64.063em) {
  .header.style1 .logo {
    text-align: center;
  }
}
.header .logo {
  display: table;
  min-height: 1px;
}
.header .logo .logolink {
  display: table-cell;
  vertical-align: middle;
  max-width: 100%;
}
.header .logo .logoimg {
  display: inline-block;
  max-height: 40px;
}
.header .menu-holder {
  text-align: right;
}
.header .menu-holder > a {
  vertical-align: middle;
}
.header .menu-holder > a + a {
  margin-left: 5px;
}
@media only screen and (min-width: 40.063em) {
  .header .menu-holder > a + a {
    margin-left: 15px;
  }
  .header .menu-holder > a + a:after {
    display: block;
  }
}
.header .menu-holder > a + a:after {
  content: '';
  display: none;
  position: absolute;
  width: 1px;
  height: 9px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAASCAYAAABxYA+/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACVJREFUeNpiLC4uTmMAAiYGKGD8//8/A4oInMFSUlJCd8UAAQYADLQTH7miXlMAAAAASUVORK5CYII=");
  top: 11px;
  left: -10px;
  -moz-background-size: 1px 9px;
  -o-background-size: 1px 9px;
  -webkit-background-size: 1px 9px;
  background-size: 1px 9px;
}
.header .menu-holder #quick_search {
  display: none;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
@media only screen and (min-width: 40.063em) {
  .header .menu-holder #quick_search {
    display: inline-block;
  }
}
.header .menu-holder #quick_search #search_icon {
  top: 4px;
  position: relative;
}
.header .menu-holder #quick_cart {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
}
.header .menu-holder #quick_cart #cart_icon {
  position: relative;
  overflow: visible;
}
.header .menu-holder #quick_cart .float_count {
  display: block;
  width: 30px;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 0;
  line-height: 24px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}
.header .menu-holder #quick_cart:hover, .header .menu-holder #quick_cart:focus {
  color: #151515;
}
@media only screen and (max-width: 40.063em) {
  .header .menu-holder #quick_cart:after {
    display: none;
  }
}

    <head> section looks like this:

    <head>
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta http-equiv="cleartype" content="on">
    <meta name="HandheldFriendly" content="True">
    <?php if( $favicon = ot_get_option('favicon')){ ?>
        <?php if (is_ssl()) {
            $favicon_image_img = str_replace("http://", "https://", $favicon);
        } else {
            $favicon_image_img = $favicon;
        }
        ?>
    <link rel="shortcut icon" href="<?php echo $favicon_image_img; ?>">
    <?php } else {?>
    <link rel="shortcut icon" href="<?php echo THB_THEME_ROOT; ?>/assets/img/favicon.ico">
    <?php } ?>
    <?php do_action( 'thb_handhelded_devices' ); ?>
    <?php
        $id = get_queried_object_id();
        $page_menu = (get_post_meta($id, 'page_menu', true) !== '' ? get_post_meta($id, 'page_menu', true) : false);
        $header_style = (isset($_GET['header_style']) ? htmlspecialchars($_GET['header_style']) : ot_get_option('header_style', 'style1'));
        $menu_mobile_toggle_view = (isset($_GET['menu_style']) ? htmlspecialchars($_GET['menu_style']) : ot_get_option('menu_style', 'style1'));
        $footer_style = (isset($_GET['footer_style']) ? htmlspecialchars($_GET['footer_style']) : ot_get_option('footer_style', 'footer-standard'));
        $left_bar = sanitize_text_field(ot_get_option('left_bar'));
        $right_bar = sanitize_text_field(ot_get_option('right_bar'));
        $site_bars = (isset($_GET['site_bars']) ? htmlspecialchars($_GET['site_bars']) : ot_get_option('site_bars', 'on'));
        $header_cart = ot_get_option('header_cart');
        $header_search = ot_get_option('header_search');
        $menu_footer = ot_get_option('menu_footer');
        $smooth_scroll = (ot_get_option('smooth_scroll') != 'off' ? 'smooth_scroll' : '');
        if (get_post_meta($id, 'header_override', true) == 'on') {
            $header_cart = get_post_meta($id, 'header_cart', true);
            $header_search = get_post_meta($id, 'header_search', true);
        }
        $logo = (ot_get_option('logo') ? ot_get_option('logo') : THB_THEME_ROOT. '/assets/img/logo.png');
        $footer = ot_get_option('footer', 'on');
    ?>
    <?php
        $class = array();
        if($site_bars == 'off') {
            array_push($class, 'site_bars_off');
        }
        if($footer == 'off') {
            array_push($class, 'footer_off');
        }
        array_push($class, $footer_style);
        array_push($class, $smooth_scroll);
    ?>
    <?php
        /* Always have wp_head() just before the closing </head>
         * tag of your theme, or you will break many plugins, which
         * generally use this hook to add elements to <head> such
         * as styles, scripts, and meta tags.
         */
        wp_head();
    ?>
</head>

    Any thoughts? Thank you,

Viewing 1 replies (of 1 total)
  • Thread Starter WPuser_78

    (@wpuser_78)

    11 years, 1 month ago

    The output HTML of the <header> is below:

    <!-- Start Header -->
        <header class="header row no-padding style2" data-equal=">.columns" role="banner">
            <div class="small-7 medium-4 columns logo">
                                    <a href="http://domain.com" class="logolink">
                        <img src="http://domain.com/wp-content/../img/logo.png" class="logoimg" alt=""/>
                    </a>
                            </div>
                        <div class="small-5 medium-8 columns menu-holder">
                                                                                <a href="#" data-target="open-menu" class="mobile-toggle always">
                    <div>
                        <span></span><span></span><span></span>
                    </div>
                </a>
            </div>
        </header>
        <!-- End Header -->

    I hope this helps.

Viewing 1 replies (of 1 total)

The topic ‘custom animated text header’ is closed to new replies.