arrow movement not working

3 replies · opened Mar 16, 2023

BbagginsMar 16, 2023

I'm using demo-shop as my base files. However, I have added the demo-nonprofit>subscribe section into my webpage. I added the nonprofit.css subscribe css into the custom.css page. All works well except the arrow doesn't twirl up or down upon clicking. It does successfully displays the form.

Here's the part of the nonprofit.css subscribe section that I put in the custom.css:

.subscribe-section .subscribe-section-target {
	cursor: pointer;
	padding: 35px 0;
}

.subscribe-icon {
	position: absolute;
	top: 0px;
	left: 50%;
	width: 120px;
	height: 120px;
	line-height: 110px;
	background-color: var(--cnvs-themecolor);
	border-radius: 50%;
	text-align: center;
	transform: translate(-50%, -45%);
}

.subscribe-icon i {
	font-size: 38px;
	text-align: center;
	color: #444;
	font-weight: 600;
}

....all the way until

.subscribe-section .subscribe-icon i { transform: scale(1); transition: transform .25s ease; }
.subscribe-section:hover .subscribe-icon i { transform: scale(1.2); }

.nonprofit-success #nonprofit-submitted { display: block; }
SSemicolon WebSTAFFMar 17, 2023

Hello,

Yes, this is a Bug! To fix this:

  1. Find the bi-arrow-down-circle Class in the HTML File and replace it with: fa-solid fa-arrow-down Classes.

  2. Find the .icon-arrow-down Classes in the demos/nonprofit/nonprofit.css File and replace it with: .fa-arrow-down Class.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

BbagginsMar 20, 2023

Was this bug fixed in v7.0.3?

SSemicolon WebSTAFFMar 20, 2023

Yes fixed.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard