Support » Themes and Templates » [Resolved] header site-navigation /header image as link

[Resolved] header site-navigation /header image as link

  • Dear forum,

    as I´m not really good in HTML etc. I have to questions:

    1) I´d like to change the “behaviour” of the first article (the big one) in the general site-navigation.

    I´d like to change it in a way so that I can decide when the article is changed. Right now there´s a date based algorithm. The other articles below shall change like always.

    2) I changed the header image and would like to set it as a link, so that clicking on this does lead you to the home site. Also I´d like to have it on the left side and not in the middle as it is now.

    This is the blog:

    Thank you very much in advance

Viewing 11 replies - 1 through 11 (of 11 total)
  • Theme Author Konstantin Kovshenin


    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 http://wpmag.ru

    .site-title a {
        color: transparent;
        display: block;
        background: url('http://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!


    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(“http://ntropy.de/wp-content/uploads/2013/08/cropped-ntropy-Logo.jpg”);
    background-position: 2% 0px;
    background-repeat: no-repeat;
    height: 90px;

    Thank you

    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;

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


    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…

    Theme Author Konstantin Kovshenin


    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(http://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.


    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;
    .site-title a {
        color: transparent;
        display: block;
        background: url('http://ntropy.de/wp-content/uploads/2013/08/cropped-ntropy-Logo.jpg') 0 0 no-repeat;
        width: 320px;
        height: 500px;
        text-indent: -9999px;
    Theme Author Konstantin Kovshenin


    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.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Resolved] header site-navigation /header image as link’ is closed to new replies.