WordPress.org

Forums

[resolved] Link header to homepage (20 posts)

  1. Jackie Chan
    Member
    Posted 2 years ago #

    Hi i'm using a wordpress, buddypress website.
    http://www.releasethereal.com

    I want the header to link back to the homepage when clicked, how can i do this?

    What code is needed, and where?

  2. Chandan Kumar
    Member
    Posted 2 years ago #

    If you want to link you whole header to home page. You should go with jquery:

    <script type="text/javascript">
    $(function(){
      $("#header").bind('click', function(){
        var url = "http://www.releasethereal.com/";
        $(location).attr('href',url);
      });
    });
    </script>

    Write the above mentioned code in your header.php just before closing head tag.

  3. Jackie Chan
    Member
    Posted 2 years ago #

    Thanks ill give that a go. Also is it possible for just the logo to have a link, rather than the whole header?

    Also i just tried that code before </head> in the header.php and had no luck

  4. Jackie Chan
    Member
    Posted 2 years ago #

    Any ideas?

  5. Chandan Kumar
    Member
    Posted 2 years ago #

    Currently, your logo is a part of header background image. So to make it link you have extract logo from background image and make it link.

  6. Jackie Chan
    Member
    Posted 2 years ago #

    Ok ill go with the first one (Link the whole header) i added the code to header.php above the closing head tag (/head) however this had no effect, am i pasting the code into the wrong place?

  7. Chandan Kumar
    Member
    Posted 2 years ago #

    Code is not showing on live site view source. If you are working on your local system. just check your jquery script is working fine.

    To check this write alert under ready function:

    <script type="text/javascript">
    $(function(){
     alert("hello");
    });
    </script>
  8. Chandan Kumar
    Member
    Posted 2 years ago #

    I will suggest you to extract your logo from background image of header and place it as individual element and link it. It is because when you will click any element under your header section it will trigger that header click event.

  9. Jackie Chan
    Member
    Posted 2 years ago #

    Ok ill try extracting the logo, how would i go about placing the JPEG on top of the header?

  10. Chandan Kumar
    Member
    Posted 2 years ago #

    After extracting logo > get width and height of logo > go to your stylesheet and make the following changes:

    CSS Code:

    #logo a{
     display:block;
     float:left;
     width: (logo width in px);
     height: (logo height in px);
     text-indent:-999em;
    }
  11. Chandan Kumar
    Member
    Posted 2 years ago #

    I missed to include background image:

    #logo a{
     display:block;
     float:left;
     width: (logo width in px);
     height: (logo height in px);
     background:url(images/logo.jpg) no-repeat 0 0;
     text-indent:-999em;
    }

    Logo image url should be relative as given above e.g. (images/logo.jpg)

  12. Jackie Chan
    Member
    Posted 2 years ago #

    Thanks, right i've added this code and added a code to hyperlink the logo, however nothing has changed, any ideas?

  13. Chandan Kumar
    Member
    Posted 2 years ago #

    It is because you have written the following code in your header.php under style tag:

    #header h1, #header #desc { display: none; }

    So please comment this code from header.php file and then try.

  14. Jackie Chan
    Member
    Posted 2 years ago #

    I've just searched through the header.php (word for word) via wordpress editor and that code does not seem to be in there, any ideas?

  15. Chandan Kumar
    Member
    Posted 2 years ago #

    When I am view source of your file it is showing there. I am not sure but it should be under header.php. Please view source of your site.

  16. Jackie Chan
    Member
    Posted 2 years ago #

    Found it in functions.php, this now shows the site title and only a portion of the image ive tried changing the dimensions but it does not effect the image size :/

  17. Chandan Kumar
    Member
    Posted 2 years ago #

    Also comment #header style from function.php if written.

    And then open your stylesheet and do the following:

    #header #logo a{
    width:160px;
    height:160px;
    position:absolute;
    top:20px;
    left:20px;
    z-index:999;
    text-indent:-999em;
    display:block!important;
    background:url(http://www.releasethereal.com/wp-content/uploads/2012/08/RTR-logo2click.png) no-repeat 0 0;
    }
  18. Jackie Chan
    Member
    Posted 2 years ago #

    Thats great thanks so much for your help, last thing having trouble hiding the site title from the header?

  19. Chandan Kumar
    Member
    Posted 2 years ago #

    Delete the text "Release The Real" which is under h1 > a. I should hide with text-indent. I think some code is conflicting.

  20. Jackie Chan
    Member
    Posted 2 years ago #

    I've deleted the text from the site title options in wordpress to save time, seems to have done the job.

    Problem solved, very appreciated.

    All the best.

Topic Closed

This topic has been closed to new replies.

About this Topic