Need help? Check out our Support site, then


Remove link from header image

  1. Is there a way to remove the link from my header image in the CSS? I have added the following line so that it doesn't appear to be a link, but if a user clicks on the image, the page still goes to the home screen.

    #menu #header-image a {
    cursor:default;
    }

    Thanks for any tips!

    The blog I need help with is benjaminsnorris.com.

  2. You are talking about your name at the top of this site, http://benjaminsnorris.com/ ? I see no header image there, only the text-based site title.

  3. Thanks for the reply. I'm actually wanting to disabled the link from the image while shows directly above the menu items. I've created the image so that it looks there is an image for each menu item, but have found that almost everyone who uses the site tries to click first on the image for the menu item instead of the text. With the cursor:default, it at least doesn't look like a link, but still if the user clicks on the image trying to go to a specific page, they will get sent to the home page. Hopefully that cleared it up a bit.

  4. I see that I didn't clarify this in my reply - you are looking at the correct site: http://benjaminsnorris.com. Thanks!

  5. Ah, now I see.

    Go to appearance > header and revert back to no header. Then add the following to the bottom of your custom CSS.

    #menu {
    background: url("http://benjaminsnorris.files.wordpress.com/2011/12/presentations-design-sketchnotes-header.png") no-repeat scroll 5px center transparent;
    height: 125px;
    }
    
    .menu-navigation-container {
    margin-top: 95px;
    }
  6. Excellent, I am much closer. The only problem now is that the image is directly behind the menu items. If I was more of a whiz with CSS, I'm sure I could just add some padding or something to the bottom, but I don't really know how to get the image above the menu items. If it's not something that you know right off, I'll search for some solutions. Thanks again!

  7. You have to get rid of the existing image at appearance > header first. Then the stuff I gave above should align things nearly the same as what you had (with less whitespace between the top border line and the image.

  8. Sorry, I didn't update the positioning in the background declaration.

    #menu {
    background: url("http://benjaminsnorris.files.wordpress.com/2011/12/presentations-design-sketchnotes-header.png") no-repeat scroll 5px -40px transparent;
    height: 125px;
    }
  9. That was it! Thanks so much for your help.

  10. You are welcome, and sorry for not getting the code right the first time. I made changes to the positioning and then didn't update them before clicking the submit button.

Topic Closed

This topic has been closed to new replies.

About this Topic