The horizontal line under the title

Hello @wordzebra,

Can you please provide us with a link to your site where I can see the issue, and better assist you with it?

Thank you!

Hey @danamv

That’s the website:

https://www.zenlingua.com/

You see the horizontal line under the title, I want the same under the three headings below, and I also would like to increase the space between the four sections a little bit.

Thank you!

Hello @wordzebra

For this specific page, you can achieve that line for the headings by adding the following code into Customizer -> Additional CSS – this will target all the <h1> elements on this page:

.page-id-113  h1{
 
    border-bottom: 1px solid var(--nv-light-bg) !important;
	
}

You can change the line-height from Customizer -> Typography -> Headings -> H1 to the height that fits your needs.

I hope this was helpful! Please let us know if it works.

Hi @denamv

It is very nice that you helped with these codes!

They work, but the problem is that when I insert the code, it also affects the title, there already present line under it remains, and so there are two lines under the Title of the first section and that looks even worse. I somewhat made things better by putting the lines over the Headings, but it would be best if I could have one line under each section.

Wouldn’t it be useful if a possibility to select “Title” from Pages/Edit/Change Heading Level is incorporated, or make this menu available for the Title on top of the page as well? Thus everybody will be able to use it and the line will come automatically, I think it will be an easy improvement on the theme’s functionality.

The Line Height idea does not work, because it affects the space both above and under the Heading. What I need to do is to separate the sections, i.e. there must be space only above and not under the Heading. Also, it adds more space between the Heading and the lines surrounding them. I just need more space between the different paragraphs, with their titles close to the text following them as they are.

I tried with adding a couple of <p> or <br> tags but that didn’t work.

Hi @wordzebra,

Instead of the previously provided code you can use:

.page-id-113 h1 {
  border-bottom: 1px solid var(--nv-light-bg);	
}

.page-id-113 .nv-page-title h1 {
 border-bottom: none;
}

This way you’ll not add the bottom border for the original title.

For further CSS customizations we recommend learning more on this page:
https://developer.chrome.com/docs/devtools/css/

I hope it helps!

Thanks, @vytis !

The !important seems to be necessary, it didn’t work until I added it.

With !important added, I was able to remove the line from the top, but not from the bottom.

In other words, this extra code excludes the added CSS from being applied to the title, but does not take away the original line under it.

That would indeed have worked in the case I asked for – adding extra lines under the new headings excluding the title. But actually, I got used to the line being on top and I think I prefer to remove all lines from the Title and just keep one above each paragraph. Can we do that?

It might have been nicer with the lines under the Headings as it was originally meant to be, but since I haven’t been able to take the paragraphs further away from each other, this only adds extra space and makes it more confusing for the reader.

Actually I noticed from the page options in the editor that it’s possible to remove the Title from a given page. I haven’t tried it, but it’s probably better and quicker with CSS, as it can more easily be programmed for every page from the Customising section. Also I don’t know if taking away the title could affect the page characteristics and SEO.

PS I think I messed the nicknames @bvytis @danamv sorry guys ??

Hi @wordzebra,

It’s definitely possible but we can provide basic guidelines as we did and for further code adaptions we recommend learning CSS with browser developer tools and make the necessary changes on the website, that will be useful for this case and other changes that you will need using custom CSS.

This is a good article to start: https://developer.chrome.com/docs/devtools/css/

I hope it helps!