Line in Classic Custom Headline

Support
#1

How do I put a line in my Classic Custom Headline like this:

#2

Hi there,

Please kindly add a Classic Custom Headline element and add the proper text you want to have there. Then in the element options add the with-line class:

Then add the CSS code below to X > Launch > Options > CSS:

.h-custom-headline.with-line:after {
    content: "";
    border-top: 5px solid yellow;
    width: 74%;
    display: block;
    float: right;
    margin-top: 20px;
}

The result will be like this:

Few points regarding the code above:

  • Change the color and the thickness of the border in the code to suit your needs.
  • Depending on the length of the text you may need to change the width in the CSS from 74% to whatever is suitable to avoid breaking the line below the text
  • You can change the 20px of the top margin to make the line go up or down as you wish.

Hope it helps.

#3

That’s awesome, thanks! What if I need the width % to be different depending on the length & positioning of the headline on the same page?

#4

Hi,

You will need to enter a different class to that headline and add another css with that class.

eg. Add with-line-2 to your second headline

Then add this css

.h-custom-headline.with-line-2:after {
    content: "";
    border-top: 5px solid yellow;
    width: 74%;
    display: block;
    float: right;
    margin-top: 20px;
}

Hope that helps.

#5

Thanks! I would actually like to centre my Classic Custom Headline and have lines on either side of it - could you help me with the code for this please?

#6

Hi There,

You can assign the class center-text to your element.

Hope that helps.

#7

I used with-line in the class field of Classic Custom Headline to create this:

How can I centre “Adventures” and have a blue line to the left & right of the word?

1 Like
#8

Hello @diytravelhq,

Thanks for updating thread. :slight_smile:

As you are using Clasic Custom Headline element, please use Text Align Center as shown in the screenshot. https://screencast.com/t/jvYRu2mj

Next, assuming that you are using with-line CSS class please add following CSS under X > Launch > Options > CSS:

.with-line span {background: #fff; padding: 0 15px; }

.with-line {position: relative; z-index: 1;}

.with-line:after {border-bottom: 3px solid #4f47f6; content: ""; position: absolute; top: 45%; left: 0; right: 0; width: 95%; z-index: -1;}

Once you add above CSS the output would look as shown in screenshot. If you would like to increase the thickness of the lines please adjust the values of border-bottom: 3px solid #4f47f6; i.e 3px in above code.

Thanks.

#9

Thanks, that’s terrific!

How can I have blue line go all the way to the end of the column to the right?

And how can I have adjust the space between the line & the title just a fraction (like 1%)?

#10

Hi there,

You can do that by disabling the inner container option of the Row settings:

To adjust the distance between the line and the text, update this code:

.with-line-3 span {
    background: #fff;
    padding: 0 15px;
}

to

.with-line-3 span {
    background: #fff;
    padding: 0 18px;
}

Hope this helps.

#11

Thanks! When I disable the Inner Container the left line goes all the way to the edge:

#12

Hi There,

Would you mind providing us the direct link to that page, so we can inspect what is happening there? I tried to look for it on your site, unfortunately, I did not find it.

Thanks,

#13

Sure, I will send you the details in a Secure Note

#14

Hi there,

Please update this:

.with-line-3:after {
    border-bottom: 5px solid #4f47f6;
    content: "";
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    width: 95%;
    z-index: -1;
}

to

.with-line-3:after {
    border-bottom: 5px solid #4f47f6;
    content: "";
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: -1;
}

Then add a class to the headline element where you want the line to be extended, like fullwidth then add this code in the custom CSS:

.fullwidth {
    max-width: 95%;
    margin: 0 auto;
}

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

1 Like
#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.