how do i make a header image 'clickable'?

mydoodleaday · Member · Feb 7, 2012 at 6:59 pm
Copy link

Add topic to favorites
Hello!

i am soory for bombarding the forums with questions, however as a new CSS user, i am struggling to solve a few issues on my blog.
i recently adjusted my blog using CSS on imbalance 2 theme and created a header image to go acroos the top of the blog.
i was wondering however whether it would be possible to attach a hyperlink to that header image so that when you are in a post and want to navigate back to the home page you can click on the image to be redirected back…

any advice would be much appreciated!

thanks,
my doodle a day

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Feb 7, 2012 at 7:39 pm
Copy link
First off, you have to unhide the site title. Then we can expand that to cover the header image and hide the text via CSS.
kothea · Member · Feb 7, 2012 at 7:46 pm
Copy link
fair response.

however i would ask, is it obvious to the user to click on the header to navigate home? IMHO you need a home button somewhere which can be from a page or menu (some of which can be horizontal near your header or in the widget bar on the side).
timethief · Member · Feb 7, 2012 at 7:49 pm
Copy link
For me a clickable header image is not important at all, which is not to say that you if want one you ought not have one. It’s simply to say that I find that clicking the blog title works very well and in addition I do choose to have a Home link in my custom menus.
thesacredpath · Member · Feb 7, 2012 at 8:00 pm
Copy link
@mydoodleaday, after un-hiding the title text, add this to your CSS at the bottom and it will make the image clickable for you.
```
#site-description {
    display: none;
}

#site-title a {
    width: 960px;
    display: block;
    height: 280px;
    text-indent: -9999px;
}
```
@kothea, it is pretty standard web-wide that clicking a header or logo will take you back to the site main page, regardless of whether there is a “home” tab in the navigation. In web design, I generally always provide both, but I never leave a logo or header un-clickable.
mydoodleaday · Member · Feb 7, 2012 at 8:05 pm
Copy link
I am sorry sacred path, bit i am not sure what you mean by ‘unhiding the title text’..
apologies for the hassle.
thanks
thesacredpath · Member · Feb 7, 2012 at 8:06 pm
Copy link
Go to appearance > header, click show text “yes” or hide text “no” (not sure of the wording).
mydoodleaday · Member · Feb 8, 2012 at 10:04 am
Copy link
Thank you very much sacred path.
you guys are doing a brilliant job!
thesacredpath · Member · Feb 8, 2012 at 10:07 am
Copy link
Thanks and you are welcome.
catztraining · Member · Feb 10, 2012 at 9:47 pm
Copy link
When I followed these instructions the header text became visible. How do I get rid of the “clickable” text and just have the header image be “clickable”? Thank you
timethief · Member · Feb 10, 2012 at 10:01 pm
Copy link
@catztraining
All CSS editing is theme spacific and you are using a different theme. In fact your theme Bold News is a premium theme and we Volunteers answering questions on this forum have no knowledge of how they are designed to operate. When you purchased your premium theme what came with that purchase was support directly from the theme designer in the Premium Theme Support Forum. There is a link for the specific Premium Theme support forum under Appearance -> Themes in your blog’s Dashboard,
timethief · Member · Feb 10, 2012 at 10:04 pm
Copy link
@catztraining
If you have purchased the custom design upgrade and need help with it then perhaps posting a separate CSS forum thread is a good idea. Here’s the link for you to do that > https://en.forums.wordpress.com/forum/css-customization#postform
designsimply · Member · Feb 11, 2012 at 2:36 am
Copy link
I would do it by turning the Display Title back on in Appearance → Header and starting with something like this to adjust the CSS:
```
.site-title a {
  text-indent: -9999px;
  display: block;
  width: 940px;
  height: 175px;
  margin-top: -80px;
}
```
You’ll probably need to adjust the heights of some things after that. Make a new thread that’s specifically about the Bold News theme if you want to take a closer look.

No items found.