Docs

[ansonofficial]

Hi Support,

http://ansonli.com/

I have put my social media buttons in my main nav bar, but I noticed now that when I hover on my social icons, the hover color goes slightly outside the box of the social media icon. How do I fix this?

Thanks,

Anson

[ansonofficial]

This reply has been marked as private.

[Nabeel A]

Hi Anson,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-navbar .x-social-global a:hover {
    border-radius: 4px !important;
    padding: 0 !important;
    width: 17px !important;
    height: 16px !important;
}

.x-navbar .x-social-global a i {
    margin-top: -2px !important;
}

Let us know how this goes!

[ansonofficial]

Hi again,

It works, but it creates a white gap between the nav bar and the slider of what I believe is 2px. How do it fix that?

Thanks,

Anson

[Nico]

Hi There,

Would you mind sharing us a screenshot showing the gap or where the gap is located.

Not sure with this, but you can also try increasing the size or height of your navbar in your Customizer.

Or add this in your customizer custom CSS:

.home .masthead {
    min-height: 90px;
}

Once we got the screenshot and we full understand it, we’ll do our best to help you.

Let us know how it goes.

Thanks.

[ansonofficial]

Of course, it looks like this.

[ansonofficial]

This is what it looks like

[Paul R]

Hi Anson,

You can try this code instead.

header.masthead {
    background:rgb(237,53,66)!important;
}

.x-navbar .x-social-global a:hover {
    border-radius: 4px !important;
    padding: 0 !important;
    width: 17px !important;
    height: 16px !important;
}

.x-navbar .x-social-global a i {
    margin-top: -2px !important;
}

Hope that helps

[ansonofficial]

It worked, thanks!

[Jade]

You’re welcome Anson.

[Author]

Posts