How to apply superscript to a character in a heading?


#1

Hello,

Is there a way to apply superscript code to an individual character in a heading on Sydney?

With reference to the attached screenshot below, I am able to apply superscript code in the text editor for the character in the paragraph on the website page - highlighted with red boxes.

However there is nowhere to apply this same code to the page heading/title. The results are shown on the screenshot, you can see that the character in the heading is too big and not small like it is in the paragraph.

Any help appreciated.

Thanks.


#2

Hello,

Can you please provide a link to the page that contains that widget?

Kind Regards, Roman.


#3

Hi Roman,

Here is the page: http://www.electralearning.com/c93GIcUki4Iep5mMvL0P/maximo-training/

I’ve added another h3 heading just above the paragraph of text which I was able to do within the text editor, to show what I’m wanting to do. I essentially want to replicate that look, with the superscript in the main centered and underlined theme heading. See screenshot below:

Thanks,
Lawrie


#4

Hello Lawrie, thank you for the link.

Try to use the following CSS code. You can add CSS code in Customize → Additional CSS section.

.panel-widget-style-for-568-1-0-0 .widget-title {
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.panel-widget-style-for-568-1-0-0 .widget-title::before {
    content: '®';
    float: right;
    font-size: 20px;
    margin-top: -2px;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.


#5

Hi Roman,

Thank you so much, that worked!

Is there any way I can also apply it to the main menu text in the header bar of the website?

Thanks,
Lawrie


#6

Hello Lawrie, try to add this as well:

@media (min-width: 1025px) {
    #menu-item-578 a::after {
        content: '®';
        font-size: 14px;
        position: absolute;
        margin-left: 3px;
        line-height: 1.3;
    }
}

@media (max-width: 1024px) {
    .menu-item-3227 a::after {
        content: '®';
        font-size: 11px;
        position: absolute;
        margin-left: 2px;
        line-height: 1.3;
    }
}

Kind Regards, Roman.