[Support request] How to retain heading color (vs. link color) when heading is a link

Home Forums Support [Support request] How to retain heading color (vs. link color) when heading is a link

Home Forums Support How to retain heading color (vs. link color) when heading is a link

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #643529
    Janet

    I have some heading2’s that I’d like to make links, but when I do, they change to the color for links. Is it possible to have a linked heading2 that stays the same color as other heading2’s? If so, how?

    #643706
    Leo
    Staff
    Customer Support

    Hi there,

    Where are the H2 links on the page you linked?

    I’m not seeing them.

    Let me know πŸ™‚

    #644032
    Janet

    On home page, http://janetmajure.com. The headings in the columns.

    #644215
    Leo
    Staff
    Customer Support

    Ah ok those are h3.

    So modify the HTML to this:
    <h3 class="h3-link"><a href="http://janetmajure.com/editorial/">Editorial Services</a></h3>

    Then add this CSS:

    h3.h3-link a {
        color: #000;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know πŸ™‚

    #644382
    Janet

    Sorry about mistaken heading ID.

    Before I launch, please confirm that I’ll need to insert the <h3 class=”h3-link”> for each h3 heading I want to use as link.

    Also, does it follow that if I want to make links from any other headings and have them retain the heading-defined color, I’ll have to define a h4 (for example) class for a link in CSS and add h4 class=”h4-link” in the HTML for each heading in question? (Don’t think I phrased that well. Let me know if it’s confusing.)

    Thanks for your response.

    #644407
    Leo
    Staff
    Customer Support

    That case then maybe try adding the class to the link itself:
    <a class="heading-link" href="http://janetmajure.com/editorial/">Editorial Services</a>

    Then target with CSS:

    .heading-link {
        color: #000;
    }

    Then it shouldn’t matter which heading you are using.

    #644542
    Janet

    Not entirely sure I’m following you, as my coding knowledge is basic. Is the following correct?

    1. Add the .heading-link business to the CSS.
    2. Add the class definition/association/whatever-it’s-called around any heading that I want to act as a link.

    Net result will be that any heading so defined will use fallback heading color, even if it’s a link.

    Is that right?

    #644564
    Leo
    Staff
    Customer Support

    It should be something like this:
    <h2><a class="heading-link" href="http://janetmajure.com/editorial/">Editorial Services</a></h2>
    <h3><a class="heading-link" href="http://janetmajure.com/editorial/">Editorial Services</a></h3>

    And the CSS would just be:

    a.heading-link {
        color: #000;
    }

    Let me know πŸ™‚

    #645374
    Janet

    Thanks. I’ll take that to mean I will indeed need to manually redo the HTML for each heading/link, even with addition to CSS (but have to do only one CSS addition). Right?

    #645409
    Leo
    Staff
    Customer Support

    Yeah I’d say that’s the easiest way unless you have hundreds of links already.

    I only saw three.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.