Need help? Check out our Support site, then


adding links in headers

  1. colinfaulknerphotography
    Member

    how do I embed a link in my header?

    The blog I need help with is colinfaulknerphotography.wordpress.com.

  2. I'm sorry but you are not allowed to embed a link to an external site in any header image here. Doing that is deceptive linking practice.

    You can create a cusom menu and include a cusom link to an external site in it.
    http://en.support.wordpress.com/menus/
    http://en.support.wordpress.com/menus/#adding-custom-links

  3. edit: replace " cusom" with "custom"

    As I see you have the CSS upgrade this thread will be moved to the CSS Forum for you. This entry may or may not be of interest. http://en.support.wordpress.com/custom-design/editing-css/#maintaining-your-custom-header

  4. thesacredpath
    Staff

    Hi there @colinfaulknerphotography, can you tell us where you want the link? It is possible to put a link (text or image) into a text widget and move that up and into the header area.

  5. You cannot add a link using CSS, but a lot of times you can add a link another way and then move it over the top of something else (like a header image) with CSS.

    I checked http://colinfaulknerphotography.wordpress.com/ and I seen that the header is your site title and it's arty link to your homepage. Were you trying to link the site title to something else instead?

  6. colinfaulknerphotography
    Member

    Yes, I was trying to link it to my website. Is there a way to do that?

  7. I'm sorry but you are not allowed to embed a link to an external site in any header image here. Doing that is deceptive linking practice.

    You can create a cusom menu and include a custom link to an external site in it.
    http://en.support.wordpress.com/menus/
    http://en.support.wordpress.com/menus/#adding-custom-links

  8. Adding a link to a header image is allowed unless the link itself is not permitted (i.e. a Terms of Service issue, which is probably what timethief is thinking of). Linking to your website should be fine in general though.

    One possible way to do it is to hijack one of the menu links and repurpose it over the top of the header area. To figure out which selector to use, you can use your browser tools. First, add a custom menu item pointing to the location you'd like to link to, then right-click on it in your browser and select the "Inspect Element" option. Find the specific class name that matches the menu item you'd like to take over. For example, one of the class names for the "Contact" menu item is "menu-item-27" so you can use that to target the "Contact" link and move it over the top of your header like this:

    .menu-item-27 a {
    	display: block;
    	position: absolute;
    	bottom: -200px;
    	left: -240px;
    	width: 700px;
    	height: 120px;
    	text-align: left;
    	text-indent: -9999px;
    	border: 1px solid red;
    }
    
    .menu-main .menu-item-27 a:hover {
    	border: none;
    }

    Add that to your Appearance → Themes → Customize → CSS panel to try it out.

    Note: I added a red border in one of the rules so it's easy to see the link while you're moving it. To get rid of that, remove the "border: 1px solid red;" line from the example above.

Topic Closed

This topic has been closed to new replies.

About this Topic