Docs

[spixelZA]

Hi

I would like to change the social icons in the main menu to the ones attached please can you advise how i can achieve this.

My Website:
http://staging.thespacestation.co.za/

Thank you

[Christopher]

Hi there,

I can’t access your site, I get Forbidden You don't have permission to access / on this server. error.

Thanks.

[spixelZA]

Hi you wont be able to access it can you not advise how i am able to change those icons to the ones i have attached?

Thank you

[Christopher]

Hi there,

Let us know which stack you’re using, maybe we could provide you with the answer.
You want them to be like second attachment, right?

Thanks.

[spixelZA]

Yes, I’m using the first attachment and would like to make them like the round second attachment.

Please advise?

[Christopher]

Hi there,

Let us know which stack you’re using currently.

Thanks.

[spixelZA]

I am currently using the attached stack.

See attached.

[spixelZA]

Im using the integrity stack.

[Friech]

Hi There,

Thank you, but its really hard to provide a tailored css if we can not view the site. Maybe you can start from this.

.x-navbar .desktop .x-nav > li > a > span .x-icon {
	display: inline-block;
    text-align: center;
    color: white;
    background-color: red;
    border-radius: 100em;
    margin: 0 1.25%;
    width: 54px;
    height: 54px;
    font-size: 21px;
    line-height: 54px;
}

Add that on your custom CSS on Customizer.

Let us know how it goes.

Cheers!

[spixelZA]

Unfortunately this doesn’t work on the page.

[spixelZA]

This code works: BUT TRYING TO LINE UP THE ICONS AS CURRENTLY, THEY ARE OFF CENTER LIKE SCREENSHOT ATTACHED AND ALSO TRYING TO GET THE ICON COLOR WHITE.

PLEASE ADVISE HOW I CAN ACHIEVE THIS.

.x-social-global a {
margin: 0 1.25%;
width: 54px;
height: 54px;
font-size: 21px;
font-size: 2.1rem;
line-height: 54px;
background-color: #16c1f3;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
transition: background-color 0.5s;
}
.x-social-global a:hover {
background-color: black;
}

[Rahul]

Hey There,

Thanks for writing back!

We’re unable to access the site, throws an error. See attached!

Would you mind double checking it?

Thanks for understanding.

[Author]

Posts