Title: custom animated text header
Last modified: August 24, 2016
---
# custom animated text header
* [WPuser_78](https://wordpress.org/support/users/wpuser_78/)
* (@wpuser_78)
* [11 years, 2 months ago](https://wordpress.org/support/topic/custom-animated-text-header/)
* I have a situation trying to find a way to replace an existing .png logo with
an [animated logo text](http://codepen.io/anon/pen/LEKreX) (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 `` 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;
}
}
```
* `` section looks like this:
* ```
<?php wp_title( '|', true, 'right' ); ?>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
```
* Any thoughts? Thank you,
Viewing 1 replies (of 1 total)
* Thread Starter [WPuser_78](https://wordpress.org/support/users/wpuser_78/)
* (@wpuser_78)
* [11 years, 2 months ago](https://wordpress.org/support/topic/custom-animated-text-header/#post-6005077)
* The output HTML of the `` is below:
* ```
```
* I hope this helps.
Viewing 1 replies (of 1 total)
The topic ‘custom animated text header’ is closed to new replies.
## Tags
* [css](https://wordpress.org/support/topic-tag/css/)
* [javascript](https://wordpress.org/support/topic-tag/javascript/)
* [php](https://wordpress.org/support/topic-tag/php/)
* In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
* 1 reply
* 1 participant
* Last reply from: [WPuser_78](https://wordpress.org/support/users/wpuser_78/)
* Last activity: [11 years, 2 months ago](https://wordpress.org/support/topic/custom-animated-text-header/#post-6005077)
* Status: not resolved
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics
