Increase Underline Margin - Question | JoomShaper

Increase Underline Margin

DA

Dina Abramson

SP Page Builder 8 months ago

at https://www.paulabacks.ca how would I increase the margin between the menu item or article headings and the line underneath? I would also like to make the line heavier than what it is. Thanks

0
7 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 8 months ago #183152

Hi Dina,

please make screenshot - add arrows or other graphic marks and then share link to that image. It will be easier to understand your question. Thanks.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 8 months ago #183153

BTW

Useful guide for CSS questions > https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action

Firefox, Firefox Developer Edition, Chrome, Opera, and Safari - all have that webmaster tool.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 8 months ago #183159

Hi

Thanks for contacting us. Could you please give me a screenshot of your issue? Its easy for us to investigate the issue properly.

-Regards.

0
DA
Dina Abramson
Accepted Answer
8 months ago #183160

https://www.accountantswebdesign.us/images/screen1.jpg https://www.accountantswebdesign.us/images/screen2.jpg

where ever you see an underline in a title or menu item.

I tried to search using webmaster tools, but wasnt as successful or knowledgable as some others....

thank you for your help Mehtaz

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 8 months ago #183192

If we talk about MainMenu in Joomla site,

  1. Remove text-decoration: underline; that you added in Custom CSS for menu items.

  2. The same if you set line-height: 140px remove it.

  3. Then use that Custom CSS

.sp-megamenu-parent > li.active > a::before {border-bottom: 2px solid;}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span { line-height: 20px;}

info_3189_2025.gif

Then (if yoou need) use also

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
  padding: 0; margin: 0 10px;}
to get shorter lines

info_3191_2025.gif

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 8 months ago #183195

If we talk about Headers titles, as well. Do not use text-decoration: underline; becuase since beginning of CSS it just add line under the text, no options to control that.

You have to use the same CSS that you used on orginal site, info_3190_2025.gif

only for different class name:

h3.sppb-title-heading::after,
h4.sppb-title-heading::after   { ADD-HERE } 
h3.sppb-title-heading,
h4.sppb-title-heading   { ADD-HERE } 

Copy, paste & customize. We cannot be CSS teachers each time, it's against Support Policy 8.2.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 8 months ago #183252

Hi Dina,

You can follow Paul's instructions. Thanks Paul for helping him.

0