Make Site Tagline & Header Image clickable to URL

  • cthaw24 · Member ·

    Hi,

    We’re trying to make our Site tagline, and the corresponding Header image clickable to the link that ‘Read More’ call to action button navigates to.

    Is there a way to achieve this through custom CSS?

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • jjchrisdiehl · Staff ·

    Unfortunately, it is not possible to add a link to html markup using CSS. If the theme doesn’t provide that functionality in the customizer then you won’t be able to do that with a WordPress.com account.

    You may wish to consider moving your blog to a self hosted installation of WordPress if you feel like you need more control over the content.

  • thesacredpath · Member ·

    Hi @cthaw24, I’ll just add this thought: the general expected behavior with internet users is that clicking on a site title and/or logo on a site will take a user back to the site’s home page, so linking them to something else can cause some discord with visitors. For me, my pattern is to click a site title or logo if I’m on a different page to get back to the main page, and when I encounter sites that do not do that, it does cause me to mildly grumble.

    Just my $0.04 (inflation). :)

  • damshooter · Member ·

    Hi thesacredpath, so disabling the image header link is also not possible?

  • thesacredpath · Member ·

    @damshooter, I looked at both site associated with your username and both are using Pique, which doesn’t have a header image in the true sense.

    In general though, you can set pointer events to none for the image link, something like this (this is only an example and the CSS selector is most likely not correct. 

    a.home-link {
  pointer-events: none;
}
  • damshooter · Member ·

    Could you explain what you meant by not having a header image in the true sense?

    Erm, i mean, when you click the button to enter the site, there’s the flowery header image above aha. Would like to know whether it is possible to disable the pointer event as i tried the pointer-events:none; but it didn’t work.

  • thesacredpath · Member ·

    Oops, sorry I only looked at the main page of your site. This would be the CSS. 

    a.pique-header {
	pointer-events: none;
}

    Since this thread is about the Ixion theme, and you are using Pique, if you need further assistance with your site, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.

  • damshooter · Member ·

    Thanks, thesacredpath, worked aha :D

  • thesacredpath · Member ·

    Hooray and you are welcome!

  • cthaw24 · Member ·

    Hi @thesacredpath,

    I agree that the general expected behavior on clicking the site logo and/or title should take the user back to the main page.

    However, I only want the site tagline (not title) to click to a different page. On the Ixion theme, using the site tagline seems to be the only way to make the header image and call to action button into an article (our desired functionality).

    For a potential separate solution, could I hide the site title & tagline, and then add text using CSS to show on the header image (like how we have the site tagline showing now)? 2 questions on this:

    1) Is it possible to add text using CSS to show on the header image?

    2) Can we make that text clickable to a URL?

    Thank you!

    The blog I need help with is https://ballisland.com

  • thesacredpath · Member ·

    1) Is it possible to add text using CSS to show on the header image?
    2) Can we make that text clickable to a URL?

    We can add little bits of text using CSS, but we can’t make that text into links. CSS is a styling document used by browsers to style and position the elements of a web page and cannot be used to add functionality, such as HTML links.

  • thesacredpath · Member ·

    You can hide the existing title and tagline at Customize > Site Identity. Just uncheck “Display Site Title and Tagline” and then save.

  • cthaw24 · Member ·

    Yes, as I mentioned I already see that.

    We want to ONLY show the Site Tagline, not the Site Title. Removing both does NOT help us.

    Or it could, if we could add text on top of the Header image using CSS:

    1) Is it possible to add text using CSS to show on the header image?

    How can we achieve this?

    Thanks

  • thesacredpath · Member ·

    We can hide the site title with the following CSS. 

    .site-branding .site-title {
	display: none;
}

    We can add other text with the following, but we cannot make the text clickable to a URL. CSS is a styling document used by browsers to style and position the elements of a web page and cannot be used to add functionality, such as links (although we can add short bits of plain text). 

    .site-description:before {
	display: block;
	content: "This is some text";
}

    After adding this and saving, visit your site and narrow down your browser to see how the text changes and shifts. The way I’ve done it, it stays with the tagline when it moves below the image below 800px in width.

  • The topic ‘Make Site Tagline & Header Image clickable to URL’ is closed to new replies.