[Theme: Codium Extend] Make Header Clickable

(@novacode7)

Codium Extend is a great, minimalist theme, but I haven’t been able to find a way to make the header image clickable. The header is loaded as a background image via CSS in functions.php:

function header_style() {
    if (get_header_image() != ''){
    ?><style type="text/css">
        div#header {
            background: url(<?php header_image(); ?>); height :230px; -moz-border-radius-topleft:6px;border-top-left-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;
        }

Here’s my website. Any ideas?

http://wordpress.org/extend/themes/codium-extend/

Viewing 9 replies - 1 through 9 (of 9 total)

WPyogi
(@wpyogi)

11 years, 11 months ago

Background images are not clickable — though there evidently are a few tricky workarounds — see this.

Or you could put the image in the header (as an image, not a background image) and then it can be clickable in the usual way. The page appearance should be the same as it is now. To do this you’d need to modify the header.php file, adding the link and image tags just above the existing h1 blog title code.

Make sure you are using a Child Theme if you are making changes to core files…

Thread Starter novacode7
(@novacode7)

11 years, 11 months ago

Thanks WPyogi. I was pretty sure there wasn’t an easy work around for this.

It is an easy switch to load it as an image via the header.php file, but I was hoping to not have to modify my theme this way. I assume that by loading the header image in this way I will no longer be able to use WP’s “Appearance” – “Header” function to change the header easily in the future.

mattborghi
(@mattborghi)

11 years, 10 months ago

I looked quite a bit, but did find a super-easy fix in the codex:

If you change your header div from this
<div id=”header”>

to this, you get a clickable header:
<div id=”header” onclick=”location.href=’http://yoururl.com/’;” style=”cursor: pointer;”>

Glad I found a fix for this… would be nice to see this as an option, in the Appearance nav…

matt

Karl Andersson
(@swekarl)

11 years, 9 months ago

Excellent Matt, I had the same problem and this was a beautiful solution – I could finally remove the “Home” item in my menu.

If you have any idea how to scale down the header image for mobile devices (it gets cut, looks ugly) or how to make it that mobile devices get the text header instead, please enlighten us. (I’ve asked in another thread, but you seem to know your things.)

jammin184
(@jammin184)

11 years, 9 months ago

Yes! Been having that problem for awhile now. Thanks for the clickable header fix.

Agree with Swekari, the header not showing on mobile is an issue. I’ve been messing with the css for awhile now trying to figure out how to get it to scale down or perhaps shift the entire image to the left to see the header image. No luck so far…

yaselpolo
(@yaselpolo)

11 years, 9 months ago

Thanks mattborghi, I just tried your info and It Worked perfect in my blog….

Thanks!
Andy Christian
(@stdestiny)

11 years, 8 months ago
the better workaround would be to make the header image the background of the anchor tag and resize it to the correct size if need be. (On my site, wpcamper.com, I wanted a smaller image instead of a full wide header, so I added the following CSS:
```
#blog-title a {
	display:block;
	background:url('http://wpcamper.com/files/2012/08/wpcamper2.png') top left;
	background-size:100%;
	background-repeat:no-repeat;
	height:100px;
	width:400px;
	max-width:100%;
	font-size:0;
}
```
Note, for this to work, you actually want to leave the header text turned on. The css makes it invisible by changing the font size to 0.
Karl Andersson
(@swekarl)

11 years, 6 months ago

There’s finally a solution to the problem of header image being cut in mobile interface. Just update to the latest version of Jetpack that was released a couple of days ago, and activate the new mobile feature. It’s excellent! I’m so happy my sites finally look good on all platforms.

Thanks for your help too, Andrew, though it didn’t work (well) for me. 😉

purpledani9
(@purpledani9)

11 years ago

I’m trying to expand my header to fit the body/content size that I’ve edited. Unfortunately the header image doesn’t cover the area well…the picture repeats. I’m not sure how to fix that.

Also the navigation menu bar isn’t going all the way across. I’m not sure how to widen this to fit. Any help would be appreciated!

my url is http://www.mysnippetsofinspiration.com