Adding Link to Main Title

• 

  michaelwpoole · Member · Nov 12, 2014 at 4:31 pm

  • Copy link
  • Add topic to favorites

  I’ve been making some modifications to my blog and one issue I can’t seem to figure out is how to add a link back to my main page to my site logo at the top of my blog.

  I added the following to CSS under customize with added the logo I wanted. I’m sure there is a way to update the CSS so that when the logo is clicked it will take you back to my main page (http:\unfocusedlens.com)

  ====================================
  
  @media (min-width:500px) {
  .site-title {
  background: url(‘//unfocusedlens.files.wordpress.com/2014/11/logo.png’) no-repeat scroll center top transparent;
  height: 108px;
  width: 576px;
  text-indent: -9999px;
  }

  .masthead {
  padding-top: 1.2em;
  }
  }
  ====================================

  Any help on this would be appreciated :)

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Nov 12, 2014 at 5:38 pm

  • Copy link

  I’m sure there is a way to update the CSS so that when the logo is clicked it will take you back to my main page (http:\unfocusedlens.com)

  Actually, that’s not something you can do with CSS! However, you can usually get a little tricky and basically commandeer a link from another place on the page, hide the link text, and overlay the clickable part that’s left over the top of something else. It can get a bit hacky depending on the theme, but it works.

  Turns out, you are in luck! Because the element you set the background image for in your CSS example above actually has a link inside it already. So, if you apply your CSS to the link instead of to just “.site-title” and make sure the display for the link is block instead of inline (so the height/width is respected), then that should do the trick.

  Try updating your example to this:

  @media (min-width:500px) {
  	.site-title a {
  		background: url('//unfocusedlens.files.wordpress.com/2014/11/logo.png') no-repeat scroll center top transparent;
  		display: block;
  		height:108px;
  		width:576px;
  		text-indent:-9999px;
  	}
  	.masthead {
  		padding-top: 1.2em
  	}
  }

  See how I changed the first selector by adding “a” and added a line for “display: block;” ?

• 

  michaelwpoole · Member · Nov 12, 2014 at 5:50 pm

  • Copy link

  You are officially my new BFF… Thank you so much for helping me out with this. It works like a charm. :)

• 

  designsimply · Member · Nov 12, 2014 at 5:54 pm

  • Copy link

  Awesome!

  Also, the BFF comment made me smile. :)