Prev and Next Navigation icons disappeared after update

[launchcatapult]

Site currently running:

X: 7.2.2
Cornerstone: 4.2.2
WordPress: 5.3.2

After updating X to (I believe) 7.2.1, the previous and next navigation in the slider at the bottom of the home page (URL in secure note) has disappeared. Updating to 7.2.2 did not fix the issue.

Looking at the code, it has the following:

<i class="x-icon-chevron-left" data-x-icon-s="">

In the past, seeing the icon value be like that has signalled issues, but that’s been for social icons, so it might be different now. Thoughts on how to fix this?

[ruenel]

Hello @launchcatapult,

Thanks for writing in!

You have added a custom css:

.flex-direction-nav a.flex-prev{
	margin-left: -8%;
	@include respond-max(700px){
		margin-left: -10%;
	}

	
}

.flex-direction-nav a.flex-next{
	margin-left: 100%;
	@include respond-max(1200px){
		margin-left: 98%;
	}
	@include respond-max(1000px){
		margin-left: 96%;
	}
	@include respond-max(770px){
		margin-left: 94%;
	}
	@include respond-max(650px){
		margin-left: 92%;
	}
	@include respond-max(550px){
		margin-left: 90%;
	}
	@include respond-max(500px){
		margin-left: 86%;
	}
	@include respond-max(426px){
		margin-left: 83%;
	}
	@include respond-max(390px){
		margin-left: 80%;
	}
}

When I temporarily disable the css in my test browser, the icons displayed on my end.

Hope this helps. Please let us know how it goes.

[launchcatapult]

What has changed that the icons are suddenly not appearing, though?

I guess the ultimate question is how can I return those icons to the left- and right-hand sides of the slider in this case?

[friech]

Hi @launchcatapult,

@launchcatapult

I guess the ultimate question is how can I return those icons to the left- and right-hand sides of the slider in this case?

Please add this to your Page > CSS

.flex-direction-nav a.flex-next {
    right: 14px;
    left: unset;
}

.flex-direction-nav a.flex-next,
.flex-direction-nav a.flex-prev {
	top: 45%;
}

Please do mind though that we can not really provide customization on the element. It seems you did customization on that classic slider element that is now messing with the slider styling. Please remove all your customization on that slider.

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

Thanks,