[Resolved] Horizontal line under H1 text

Home Forums Support [Resolved] Horizontal line under H1 text

Home Forums Support Horizontal line under H1 text

  • This topic has 13 replies, 3 voices, and was last updated 3 years ago by Elvin.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1686812
    Henk

    Hello,

    How do I get a horizontal line (width 75px) under my H1 text?

    Here is an example of what I want.

    I tried the following CSS code:

    h1:before {
      content: '';
      width: 75px;
      height: 3px;
      background: #006699;
      position: absolute;
      left: 0px;
      bottom: -10px;
      right:0;  
      margin:0 auto;
    }

    But the horizontal line is not under the H1 text, but under the P tag. Also this does not work on mobile view.

    #1686870
    David
    Staff
    Customer Support

    Hi there,

    try:

    h1 {
      position: relative;
      display: inline-block;
    }
    h1:before {
      content: '';
      width: 75px;
      height: 3px;
      background: #006699;
      position: absolute;
      left: 0px;
      bottom: 0;
      right:0;  
      margin:0 auto;
    }

    You may want to adjust the line-height and bottom margin of the H1 in the Customizer to position closer/further away below the text.

    #1687621
    Henk

    Hi David,

    I added the above code, and it works. But now my H1 text moves to the left. I added text-align:center; but this does not help.

    Any suggestions?

    Thanks!

    #1687630
    Elvin
    Staff
    Customer Support

    Hi there,

    On this CSs:

    h1 {
      position: relative;
      display: inline-block;
    }

    Can you try removing display: inline-block;?

    #1687654
    Henk

    Thanks Alvin!

    This works for the home page. But now onn the other pages my line is in the middle, and not to the left. How do I change that?

    #1687695
    Elvin
    Staff
    Customer Support

    You’ll have to add selector to the previous CSS you’ve added so it only applies to the home page.

    Example:

    body.home h1 {
      position: relative;
      display: inline-block;
    }
    body.home h1:before {
      content: '';
      width: 75px;
      height: 3px;
      background: #006699;
      position: absolute;
      left: 0px;
      bottom: 0;
      right:0;  
      margin:0 auto;
    }
    #1687700
    Henk

    I have added a selector for the other pages. There I want to move the line to the left under the H1. How can I do that?

    #1687710
    Elvin
    Staff
    Customer Support

    Try this:

    :not(body.home) h1:before {
      content: '';
      width: 75px;
      height: 3px;
      background: #006699;
      position: absolute;
      left: 0px;
      bottom: 0;
      right:0;  
      margin:0;
    }

    Note: This isn’t good practice. If you wish to apply specific stylings to specific headings, you should use GB Headline’s classes to apply proper styling through the class selectors instead of non specific selector styling. (h1 tag)

    #1687717
    Henk

    Hi Alvin,

    Are you saying I can create the horizontal line under my H1 text using just GB?

    #1688322
    David
    Staff
    Customer Support

    What Elvin means – in the Block Editor, any block you set in Advanced panel you can set an Additional CSS Class – which you can use to style each heading with CSS.

    But lets forget that for now.

    Can you confirm there will be:

    1. H1 aligned left with underline aligned left – if so – where does that apply?
    2. H1 centre aligned with underline centre aligned – is so where does that apply ?

    #1689100
    Henk

    Hi David,

    I decided to use the H1 underline only on the homepage. This is what I have now:

    body.home h1 {
      position: relative;
    }
    body.home h1:before {
      content: '';
      width: 75px;
      height: 3px;
      background: #F0F5F9;
      position: absolute;
      left: 0px;
      bottom: 0;
      right:0;  
      margin:0 auto;
    }

    Is this the correct way of doing it?

    #1689113
    Elvin
    Staff
    Customer Support

    I decided to use the H1 underline only on the homepage. This is what I have now:

    body.home h1 {
      position: relative;
    }
    body.home h1:before {
      content: '';
      width: 75px;
      height: 3px;
      background: #F0F5F9;
      position: absolute;
      left: 0px;
      bottom: 0;
      right:0;  
      margin:0 auto;
    }

    Is this the correct way of doing it?

    Yes that’s correct.

    #1689133
    Henk

    Thanks Elvin!

    #1689137
    Elvin
    Staff
    Customer Support

    No problem. 🙂

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