Vertical text replacing top bar menu icon

[gimmechefs]

Hi Guys…

This is what i have searching the forum

.x-icon-plus-circle:before {content: “\f002 Classifieds”; font-size: 1.5em; color: black; transform: rotate(90deg); transform-origin: left top 0;}

Im trying to get {content: “\f002 Classifieds”; } text to display vertically.

Bit stuck on how to do it as “transform: rotate(90deg); transform-origin: left top 0;}”
is not working.

Also, the text is displayng toward the bottom of the section. I would like it to be centred in the rectangle.

.x-btn-widgetbar {
border-top: 140px solid #F2A22C;
border-left: 0px solid transparent;
border-right: 26px solid #F2A22C;
border-bottom: 40px solid transparent;

}
You can see the page in question at www.splitshifts.com.au

Any help is greatly appreciated.

Best
Max

[friech]

Hi Max,

Thank you for writing in, please add this to your custom CSS

a.x-btn-widgetbar i.x-icon-plus-circle {
	transform: rotate(90deg);
	top: -76px;
    right: -63px;
}

Keep in mind that this serves only a guide and might need some adjustment to suit your needs.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Cheers,

[gimmechefs]

As always, your support is second to none! Thanks so much. Worked perfectly.

[ruenel]

You are most welcome @GimmeChefs !
We’re glad we were able to help you out.