Replacing Site Title with Logo Image

• 

  manaupanau · Member · Mar 15, 2018 at 7:18 am

  • Copy link
  • Add topic to favorites

  I am wanting to replace my site title with our company logo and the css I’ve been using is not working.
  My site is adventurealternativeindonesia.com,I am using twenty fourteen child theme and my current css code is as follows –

  hgroup {
  height: 140px;
  }

  #main-title #site-title {
  display: block;
  }

  #main-title #site-title a {
  display: block;
  width: 382px;
  height: 120px;
  background: url(http://adventurealternativeindonesia.com/wp-content/uploads/2018/03/AAILOGO-1.jpg) no-repeat 0 -20px;
  text-indent: -9999px;
  }

  #main-title #site-description {
  display: block;
  text-indent: -9999px;
  }

  #main-title #site-description {
  display: block;
  text-indent: -9999px;
  }

  This doesnt make any changes to my site, can anyone tell me what css code I need to use?

  Thanks!

• 

  shubhamgmath · Member · Mar 15, 2018 at 7:27 am

  • Copy link

  Hi

   Your site is using WordPress.org software which is hosted on another host. So WordPress.com forum is not the right place to get the solution for your question.

  You can post your question in WordPress.org forum:
  https://wordpress.org/support/forums/

  For more information here is the support documentation link below:
  https://codex.wordpress.org/

  WordPress.com forum helps the sites hosted on WordPress.com only
  WordPress.com and WordPress.org are both different platforms, you can find more information for this here:
  https://en.support.wordpress.com/com-vs-org/

  You’ll need a free WordPress.org account to post – if you don’t already have one, you can register here:
  https://wordpress.org/support/register.php

  Hope this helps

• 

  thesacredpath · Member · Mar 15, 2018 at 7:16 pm

  • Copy link

  Hi @manaupanau, there is a dedicated Twenty Fourteen support forum at WordPress.org where you can post for help with your self-hosted site.

  I took a quick look at your site, and I would suggest starting with this CSS to add a logo and hide the text-based site title.

  .site-title {
  	background: url('http://adventurealternativeindonesia.com/wp-content/uploads/2018/03/AAILOGO-1.jpg') no-repeat scroll left top / contain;
  	height: 90px;
  }
  #masthead {
  	height: 100px;
  }
  .site-title a, .site-title a:hover {
  	color: transparent;
  }