header site-navigation /header image as link

Hey there!

You can customize what goes to the featured content areas by setting posts to sticky or by using Jetpack’s featured content module. Having one static and the other rotating is trickier, as I explained in your other thread.

Re 2, the header image is intended to be used as a background, just like in the Twenty Thirteen theme. If you’d like to put a clickable company logo in your header, it’s best to do it via some custom CSS like we did on https://wpmag.ru

.site-title a {
    color: transparent;
    display: block;
    background: url('https://wpmag.ru/files/2013/05/wordpress-magazine.png') 0 0 no-repeat;
    width: 266px;
    height: 117px;
    text-indent: -9999px;
}

Obviously, you’ll use your own image ??

Hope that helps!

Hey,

thank your for the tip. I′m using My custom CSS and wrote it in the data mask, but it didn′t work. Do I have to change sth. in the original header?
Or does it have something to do with the code below, which I wrote in the custom CSS to change the position of the header image:

`.site-header .site-branding {
background-color: transparent;
background-image: url(“https://ntropy.de/wp-content/uploads/2013/08/cropped-ntropy-Logo.jpg”);
background-position: 2% 0px;
background-repeat: no-repeat;
height: 90px;
}

Thank you
P

Hi Phire,
I hope that you can help me.
I would like to put an image on my header but it seems that it doesn’t work.

I edit in my expound.css the line .site-header .site-branding

position: relative;
  min-height: 154px;
  background-image:url(mfc/logo-mfc.jpg);
  background-repeat:no-repeat;

My image in on a file on my desktop. I think that my url to look my image is good…

Hi,

see what I wrote in my first sentence. I′m an autodidact so I can′t help you, sorry .-

I still don′t know how to make a link out of the header image…!?

Could somebody please help me? The proposal of Konstantin didn′t work, see post above…

Phire, looks like you’re missing an opening quote in your URL in your CSS. Here’s what I got from your site:

.site-title a {
    background: url(https://ntropy.de/wp-content/uploads/2013/08/cropped-ntropy-Logo.jpg") 0 0 no-repeat;
}

See where you’re missing a quote? Try and add that quote, clear your cache and refresh the page, see if that works. It’s also a good idea to remove your header image to test changes.

Cheers!

Ok, I tried nearly everything to really replace the image with the header text, which didn′t work, because at one point I suddenly had two images.

Now I put the code you posted again in the CSS but it doesn′t change anythin. Do you know why?

Thank you in advance!

(Right now you can see a compromise, I just took the background image and put the header text below it and made it transparent so they don′t collide) if you click on the bottom half it′s as if the image would be a link at the same time…)

Ah I just resolved the problem. I deleted the header image on the customize page and enabled the header text. I guess the code replaces this text with the image.

To adjust the distances I included the margin-top:-50px and changed the height.

This is what the php looks like now:

.site-header .site-branding {
    background-color: transparent;
  	background-position: 1% 0px;
    background-repeat: no-repeat;
    height: 120px;
  	margin-top:-50px

.site-title a {
    color: transparent;
    display: block;
    background: url('https://ntropy.de/wp-content/uploads/2013/08/cropped-ntropy-Logo.jpg') 0 0 no-repeat;
    width: 320px;
    height: 500px;
    text-indent: -9999px;
}

As I pointed out in the other thread, 500px height is covering the featured part of your page, making it impossible to click the links/buttons. Also, your first CSS block is lacking the closing curly brace }

Other than that, looks fine!

Hi there Konstantin, thank you for such a lovely theme, it seems pretty easy enough to customize and use, unfortunately my coding knowledge is extremely limited. I’m trying to do a few things. 1. change the color of the header from blue to a dark yellow
2. make my logo image on the header clickable so that it takes you to the home page. I followed a few other tutorials and created a childtheme which piggy backs of the orriginal theme. but as far as making the image clickable i’m stuck can you help?
Thanks alot

@samgraphics instead of using a custom header, you’ll need to add the image with CSS to your site title, that way it’ll be clickable. Same applies to #1, you can change colors with CSS, there are quite a few threads here in the forums that address that.

Thanks Konstantin, again very nice theme bro.