Home Link For Header When Image Only

Thanks for trying out the theme.

Love the theme and the Asteroid Options are really terrific! I do have an issue with regard to the use of an image-only for the header. I noticed that when this is the case, and no header text is displayed, the image itself does not contain a link to the home url.

It’s standard practice to allow the visitor to instantly navigate to the root of the site by clicking the header image and/or text.

It’s true the entire header does not link to the homepage. I thought it would be redundant since either the Text(site-title) and the Logo are already linked. And usually users choose between those two. I have have seen a site that uses a wide image for the logo instead so it covers the entire header and is still linked to the homepage.
Update? Do you think it should be added?

I have a temporary mockup of this issue. I am using only an image for the header, and as it stands with the theme left at default, there is no way for me to direct the visitor to “home” unless I add a link to the menu. Clicking the header image does nothing, leaving the visitor unable to access the root of my site unless I specifically give them a link elsewhere to do so.

Thanks again!

If you’d really like to link the entire header there are two options I can think of.

a. Add a child-theme and edit the header to manually add the link.
b. Upload an image 960×120(or whatever dimensions you are using) into the theme’s logo option.

the second option is much more easier.

Now, why had I not thought of that? The second option worked perfectly. I simply modified the url the image was given to the home url of my site.

Works perfectly!

Again, thanks!!!

Sorry but could you explain how to do this better? I am new and am having the same issue!

tylercook10811,

When an image is used for the header/title of the site you have the option of hyperlinking that image. So I used an image and then made the hyperlink the address of my site’s homepage. So now no matter where you are on the site, simply clicking the title at the top will instantly take you to the front page of the site.

Can you instruct me as to the location of the hyperlink option please?

I looked under the header tab where I uploaded my header but I don’t see the hyperlink section

When you click “upload” a shadowbox appears where you can drag-n-drop an image to use as the logo. When you do that a new screen appears that allows you to set the image attributes, including a link-to url, which you can type there the homepage of your site.

ok great thanks. Another issue you may be able to help me with… The image I use for the header is made into two copies of the image sidebyside. Only the left side is allowed to be clicked to send the website visitor home. Any idea on how to fix. Here’s the site for further illustration. https://www.freeexpertpicks.net

It looks like you set it to tile (repeat) the image rather than centering a single image. The hyperlink only works on the first image while the second one is just a static image.

I only know how to change the background to tile etc. How can I change the header?

Edit, to make clearer.

When viewing the code for the homepage using Chrome (right-click header image and select inspect element) there is a header and header-info-wrap declaration.

When selecting the line that says header I see both images are highlighted. But when selecting the line with header-info-wrap then only the first image is highlighted. You might try removing one of those (don’t forget to remove the trailing <div> tag too.

Edit #2: It appears that what is happening is both header and header-info-wrap are each displaying an image. I’d remove the header one. I bet that is what the issue is. Because it’s not a header tag, like <header> but rather a css class called header, and that may be where the double display of the header image is coming from.

I removed the header but the logo isn’t centered now. Even though I selected center when I edited the logo… any ideas?

I now remember when I first used the theme I had that problem. Go into the style.css in the theme folder and find #header-info-wrap and modify that line to look like this:

#header-info-wrap {text-align: center;}

Edit: Even though it says text-align, it will center the image you are using for the header.