Center Align special heading so that lines still show

Hey codecreative!

Add this to your custom CSS.

body .av-special-heading.blockquote .special-heading-border {
  display: block !important;
}

If you want to move it up a bit then you can add this.

top: -20px;

Regards,
Elliott

Hey!

Try adding this as well.

.av-special-heading-tag {
    background: none repeat scroll 0 0 white !important;
    left: 50% !important;
    position: relative;
    transform: translate(-50%);
    z-index: 100;
    display: inline-block !important;
    float: none !important;
    margin: 0 auto !important;
    padding: 10px !important;
    width: auto !important;
}

Cheers!
Elliott

Hey!

Send us a link to the page where your using it at so we can see what’s going on.

Regards,
Elliott

Hey!

I don’t think its possible by default with the theme, but we can give you a quite complicated workaround:

Add two separator elements from Avia Layout Builder above your special heading. Go and edit the separator items. Choose the width you ned for each side. For “Top Margin” and “Bottom Margin” choose 0px. Choose no icon obviously.
After finding both separator elements on your page, you need to add this into Quick CSS:
For first separator:

.hr.hr-custom.hr-center.hr-icon-no.avia-builder-el-1.el_after_av_textblock.el_before_av_hr {
left: -141px;
top: 46px;
}

For second separator:

.hr.hr-custom.hr-center.hr-icon-no.avia-builder-el-2.el_after_av_hr.el_before_av_heading {
left: 142px;
top: 22px;
}

You need to adjust “left” and “top” so it fits for your special heading.

If you need help for adjusting the separators correctly give us a shout after adding them into your page.

Hope that helps.

Cheers!
Andy

Hi skynandi,

Here is some css you can play with

If you need further assistance please let us know.
Best regards,
Victoria

Hi,

Please go to the Theme Settings of Enfold, and you will be there to past the custom CSS

Best regards,
Basilis

Hi @skynandi,

Have you tried the CSS in this thread: https://kriesi.at/support/topic/heading-centered-between-lines/#post-594448

If you need further help, please provide us with a link to the website where you would like to do this.

Best regards,
Sarah

Hi Nandor,

Can you show us what you’ve got so far?

Best regards,
Victoria

Hi skynandi,

Could you please give us a link to your website, we need more context to be able to help you.

Best regards,
Victoria

Hi skynandi,

Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .av-special-heading-tag:after {
    content: '';
    width: 30% !important;

}
.av-special-heading-tag:before {
    content: '';
     width: 30% !important;
}
}


@media only screen and (max-width: 479px) {
  .av-special-heading-tag:after {
    content: '';
    width: 20% !important;

}
.av-special-heading-tag:before {
    content: '';
     width: 20% !important;
}
}
.av-special-heading-tag:after {
    content: '';
    width: 40%;
    height: 1px;
    border-bottom: 1px solid #6cc24a;
    position: absolute;
    right: 0;
    top: 45%;
}
.av-special-heading-tag:before {
    content: '';
    width: 40%;
    height: 1px;
    border-bottom: 1px solid #6cc24a;
    position: absolute;
    left: 0;
    top: 45%;
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi skynandi,

Glad we got it working for you! :)

If you need further assistance please let us know.

Best regards,
Victoria

Hi,

Glad that Victoria helped you. Thanks for using Enfold :)

Best regards,
Nikko