Title: Replace Header Text with Logo
Last modified: August 31, 2016

---

# Replace Header Text with Logo

 *  [chesarms](https://wordpress.org/support/users/chesarms/)
 * (@chesarms)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/replace-header-text-with-logo-3/)
 * Hi There,
 * I manage the site [http://www.radbuilders.com](http://www.radbuilders.com). I’d
   like to replace the header text with a logo. As a workaround, I currently have“
   display header text” un-checked in the “site identity” section of the customizer
   menu and I’ve uploaded a header image with a centered logo. However, the logo
   is part of the header image and not a clickable, stand-alone object within the
   page. Also, it doesn’t resize the way the Header Text does for mobile and other
   various screen sizes.
 * Is there a way to manipulate the code in order to tell the site to display an
   image (in this case the company logo) in place of the header text, so that it
   responds in the same way the text would?
 * Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [paulwpxp](https://wordpress.org/support/users/paulwp/)
 * (@paulwp)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/replace-header-text-with-logo-3/#post-7239332)
 * Suppose the logo image size is 300×75, use this code in Custom CSS plugin will
   do the job.
 *     ```
       .site-title {
       	line-height: 3; /* make sure it's a lot */
       	display: block;
       }
   
       .site-title a {
       	border: 0;
       	width: 300px;
       	height: 75px; /* same as logo's width and height */
       	margin: 0 auto;
       	overflow: hidden;
       }
   
       .site-title a::before {
       	background-image: url("http://dummyimage.com/300x75/00aad9/fff.png");
       	content: "";
       	display: block;
       	width: 300px;
       	height: 75px;
       }
       ```
   
 * Just change the background image URL to the real one, upload the image into your
   site first and then get the image URL.
 * Custom CSS plugin
    [https://wordpress.org/plugins/search.php?q=custom+css](https://wordpress.org/plugins/search.php?q=custom+css)
 *  Thread Starter [chesarms](https://wordpress.org/support/users/chesarms/)
 * (@chesarms)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/replace-header-text-with-logo-3/#post-7239367)
 * Thank you Paul, this works!
 * However, the logo’s size isn’t responsive the way the Header Text was responsive
   prior to inserting the code. Is that something that can be done as well?
 *  [paulwpxp](https://wordpress.org/support/users/paulwp/)
 * (@paulwp)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/replace-header-text-with-logo-3/#post-7239376)
 * Yes, we just need another set of CSS in media query below that code.
 * Please note that I tested that code via Theme’s demo site
    [https://wp-themes.com/argent/](https://wp-themes.com/argent/)
 * The demo sets to display site title, and NOT display site description.
 *  [kapmja](https://wordpress.org/support/users/kapmja/)
 * (@kapmja)
 * [10 years ago](https://wordpress.org/support/topic/replace-header-text-with-logo-3/#post-7239640)
 * Is there another way to do this without the Custom CSS plugin? The above code
   didn’t work for me. I’m a novice to this … I set up a child theme (used a plugin
   for that which may not help) but also run Jetpack as I was under the impression
   I need that to use the portfolio feature.
    I’m trying to use my logo which is
   a .png file currently in my media folder. I want it to be the header text that
   hovers over the header image. Have other questions but will start there. Any 
   assistance is appreciated. Site – shoptalksports.com
 *  [sacredpath](https://wordpress.org/support/users/sacredpath/)
 * (@sacredpath)
 * Automattic Happiness Engineer
 * [9 years, 12 months ago](https://wordpress.org/support/topic/replace-header-text-with-logo-3/#post-7239644)
 * You can edit and add it to the child theme CSS file. Go to Appearance > Editor.
 * If you are running Jetpack, and you have it active and connected, you will also
   see Edit CSS in the Appearance section. That will allow you to add custom CSS
   and not have to edit the child theme CSS file.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Replace Header Text with Logo’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/argent/1.1.5/screenshot.png)
 * Argent
 * [Support Threads](https://wordpress.org/support/theme/argent/)
 * [Active Topics](https://wordpress.org/support/theme/argent/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/argent/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/argent/reviews/)

 * 5 replies
 * 4 participants
 * Last reply from: [sacredpath](https://wordpress.org/support/users/sacredpath/)
 * Last activity: [9 years, 12 months ago](https://wordpress.org/support/topic/replace-header-text-with-logo-3/#post-7239644)
 * Status: not resolved