[philippe@philippebonneau.netParticipant]

I have a topbar on this website http://dev.standredekamouraska.ca and I wold like to have the text aligned right but 20px at the left of the social icons. I have tried to paste some of the CSS for topics like this one on this forum but the text is at the right of the social icons.I would also like to view the hover state on the links of the topbar.

X theme version 4.6.2

Cornerstone v 1.3.2

[ThaiModerator]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-topbar .p-info {
    float: right;
    margin-left: 20px;
}

Hope it helps 🙂

[philippe@philippebonneau.netParticipant]

The text is now on the right side but I want the social icon to be at the right of the text with a 20px distance between the text and the Facebook icon.

I would also like to have the hover state on the links.

Thank’s for the fast support.

[ChristianModerator]

In that case, please change the code given previously to

.x-topbar .p-info {
    width: 93%;
    text-align: right;
}

Thanks.

[philippe@philippebonneau.netParticipant]

Thank you Christian. It works but it is not very responsive.

On smaller screen size the icon go centred under the text.

[ChristianModerator]

Hey there,

Yes, it is not responsive and you’ll need extra media query for that. I can only give a simple one as this is outside the scope of our support. Change the code to

.x-topbar .p-info {
    width: 90%;
    text-align: right;
}
@media (max-width:767px) {
    .x-topbar .p-info {
        width: 100%;
        text-align: center;
    }
}

Regarding the social icon, that really falls below the topbar info and centered. Additional media query is required to reposition that. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

Thanks.

[philippe@philippebonneau.netParticipant]

Thank you Christian. It will be ok with this code.

Can you help me with the hover state of the links please?

[JoaoModerator]

Hi There,

Please add the following the code to Appereance > Customizer > Custom > CSS

.x-topbar .p-info a:hover {
color: red;
}

Hope it helps

Joao

[ChristianModerator]

To change the color on hover, please add the code

.x-topbar .p-info a:hover {
    color: red;
}

Thanks.

[philippe@philippebonneau.netParticipant]

Great!

Thank you all support team.

[ThaiModerator]

You’re most welcome 🙂

[Author]

Posts