making header clickable to homepage

bunandbiscuit · Member · May 14, 2012 at 2:08 pm
Copy link

Add topic to favorites
Hello,

I would like make my header clickable so it links to the home page when clicked. Is there a way to do this with CSS? Can I create a link that is attached to an image?

Any help would be greatly appreciated. I am a newbie!

blog: http://bunandbiscuit.wordpress.com/

The blog I need help with is: (visible only to logged in users)
designsimply · Member · May 15, 2012 at 2:48 pm
Copy link
There is not a way to make something clickable with CSS, but a lot of times what you can do is attach a background image to something that is already clickable such as site title that is already linked to the blog home page or change the dimensions of an already existing links to essentially overlap an image.

In your case, what you did was essentially take the clickable part and move it off left by 500 pixels with this CSS:
```
#main-nav h1,#main-nav .description {
	margin-left:-500px;
}
```
I would recommend using text-indent instead of margin-left there because a margin will affect the spacing of the blog directly whereas text-indent will only affect the text placement.

Try the following to see if it gets the end result you’re looking for:

Remove this:
```
#main-nav {
	background:url('http://bunandbiscuit.files.wordpress.com/2012/05/girlwdog_145x218_logo.jpg') no-repeat scroll 0 0 transparent;
	margin:0;
	padding-top:9em;
	overflow:hidden;
	position:absolute;
}

#main-nav h1,#main-nav .description {
	margin-left:-500px;
}
```
Add this:
```
#main-nav h1.masthead a,
#main-nav h1.masthead a:hover {
	display: block;
	background:url('http://bunandbiscuit.files.wordpress.com/2012/05/girlwdog_145x218_logo.jpg') no-repeat;
	width: 145px;
	height: 218px;
	text-indent: -9999px;
}
#main-nav .description {
	text-indent: -9999px;}
#main-nav .menu-wrap {
	margin-top: -14px;
}
```
It will work to restore the Oulipo settings where the site title (which you replaced with an image) and the main navigation are fixed in place because it removes “position:absolute” from “#main-nav”. See that?

You’re doing great! I think you got really far just by looking at other forums!
bunandbiscuit · Member · May 15, 2012 at 3:15 pm
Copy link
Thanks,

I tried adding what you recommended but now part of the right side menu is cut off. Is there a way to fix this?

Also is there a way that I could make the log and the menu stay on the top of the page? Right now, it scrolls down with the rest of the page.

Thanks for all of your help!
designsimply · Member · May 15, 2012 at 3:17 pm
Copy link
I tried adding what you recommended but now part of the right side menu is cut off. Is there a way to fix this?

It doesn’t look cut off to me. I checked it in a few browsers, but not all. May I ask exactly what is getting cut off and what browser version you’re using please?
designsimply · Member · May 15, 2012 at 3:20 pm
Copy link
Also is there a way that I could make the log and the menu stay on the top of the page? Right now, it scrolls down with the rest of the page.

What do you mean by the log? The image on the left and the main menu are staying in a fixed position and not moving with the rest of the page right now when I check. This is because they are using fixed positioning. See https://developer.mozilla.org/en/CSS/position to learn more about how positioning works.
bunandbiscuit · Member · May 15, 2012 at 3:48 pm
Copy link
I meant the logo…sorry. For some reason it is scrolling down with the page when I scroll down. Are you seeing something different? It there a way I can do absolute positioning?

Thanks for all your help!
designsimply · Member · May 19, 2012 at 4:52 pm
Copy link
Yep, the logo stays fixed for me. I tested in Chrome 18, Safari 5.1.2, and Firefox 12.0 on a Mac just now and the logo position is fixed. What browser and browser version are you using?

No items found.