Centering icon challenge

Support
#1

Hi there.

Since the latest PRO update I have had difficulty fully centering the icon as illustrated in the attached. Please advise.

Thanks.

#2

Hi @nblund,

Thanks for reaching out.

May I know which page and section have this icon? It seems to be different from your provided site.

Thanks!

#3

Hi @nblund,

I found the correct site from your account, but with alignment, I recommend using revolution slider for that. Because the icon moves as the breakpoint change (scale up and down). And the solution is to make it positioning responsive which will require complex customization we can’t provide. So your best option for that is revolution slider as you can easily align and position elements while being responsive.

Please check this https://www.themepunch.com/revslider-doc/layer-styles-positioning/

Thanks!

#4

Hi there. I listed the website in the secure note. I am not sure I follow you. I don’t see how the toggle icon has anything to do with the revolution slider? Look forward to hearing from you again. Thanks.

#5

Hi again,

Try giving your icon a class e.g centered-element and then add the following code in the Theme Options > CSS:

.centered-element {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

To learn more about centering elements please see https://css-tricks.com/centering-css-complete-guide/

Let us know how this goes!

#6

Unfortunately, that didn’t do the trick. Do you have other good suggestions? (I wonder why it is not centered in the first place?) Thanks.

#7

Hello @nblund,

Thanks for updating the thread.

Can you please confirm the website URL as on the page I don’t see the icon as shown in the screenshot? Or can you please share the exact page URL where I can see the same. Unfortunately I am not able to locate the icon and also I don’t see the code shared by my colleague @Nabeel on the website. Please confirm and we will guide you accordingly.

Thanks.

#8

I am sorry. I gave you the wrong URL. Please see secure note once more. Thanks

#9

Hi There,

That icon is leaning to the right a bit naturally so it looks like it’s not centered. Lets add a little bit of offset on it. Please add this on that toggle’s Element CSS area.

$el .x-graphic-icon.x-graphic-primary:before {
    margin-left: -0.55em !important;
}

Feel free to adjust the 0.55em value, where you see it fits.

Hope it helps,
Cheers!

#10

Worked just fine. Thanks so much. Final question: Applying margin-top: 1px (or equivalent) to the same class does work - so what do I do there?

#11

Hi There,

Yes same class would work!
The updated CSS should be like this.

$el .x-graphic-icon.x-graphic-primary:before {
    margin-left: -0.55em !important;
   margin-top: 1px !important;
}

Hope this helps!

#12

Hi there. Sorry, I meant ‘does NOT work’. So, applying margin-top: 1px !important; to the same class pushes the icon too far down - much further than the equivalent to 1px. See attached image. Any suggestions?

Thanks

#13

Hi There,

That is the initial position of the icon, giving it a 1px top margin will just move it 1px from its initial position. Try

$el .x-graphic-icon.x-graphic-primary:before {
    margin-left: -0.55em !important;
    margin-top: -0.45em !important;
}

margin-top positive value push the icon downward, negative value push the icon upward.

Hope it helps,
Cheers!

#14

Thank you so much for your help.

#15

You’re more than welcome, glad we could help.

Cheers!

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.