Removing or change the asterisk symbol in the Horizon theme

Horizon has this symbol above the title that perfectly matches your organization’s branding. Said no one ever. Unfortunately there is no option to change or hide it. Here is a Theme Component you can use to hide it or change it according to match your branding requirements.

Download the sample course:

Horizon Theme Symbol


/* hide dumb asterisk. 
use display none to remove element plus spacing
use visibility hidden to remove element and its spacing */
.imaginative .cover__header-content-info > svg {
	 /* display: none; */
	 visibility: hidden; 
}


/* replace dumb asterisk with a unicode symbol from https://www.vertex42.com/ExcelTips/unicode-symbols.html 
.imaginative .cover__header-content-info::before {
	content: "※";
	font-size: 40px;
	display: block;
	margin: 0px auto;
	text-align: center;
	color: var(--color-header-text);
}
*/


/* replace asterisk with logo example 

.imaginative .cover__header-content-info::before {
	content: "";
	display: block;
	margin: 0px auto;
	background-image: url(mylogo.svg);
	background-repeat: no-repeat;
	background-position: center;
	height: 20px;
  	margin-bottom: 40px;
  	margin-top: 30px;
}

*/