CODEWITHSUNDEEP
htmlcsswordpresshoverfont-awesome
HappyHands31
HappyHands31

Reputation: 4101

How to Style Social Media Links Correctly

Link To Website

Please see the social media links in the Nav Menu. You'll notice that when you hover over the other links in the Nav Menu, their font changes colors, but when you hover over the social media links, their background padding increases and they shift over to the side - this isn't what I want. All I want is for the links to fill with the same light blue color as the other links in the Nav Menu (#76abdc) as you hover over them. So for example, the "f" in the Facebook icon would be filled with #76abdc, the bird in the Twitter icon would be filled with #76abdc, and the "in" in the LinkedIn icon would also be filled with #76abdc.

I personally don't know how this style was applied (I didn't develop this part of the site), but I do know that it's using font-awesome and you can view the following styles when you force a:hover over these classes:

.secondary-navbar .navbar-nav > li > a:hover {
    background-color: #fff;
    border-radius: 5px;
    color: #1971b9;
    font-weight: bold;
    font-size: 120%;
    text-transform: uppercase;
    margin: 13px 12px 0; 
}

.secondary-navbar .social-links > li > a:hover, .secondary-navbar
.social-links > li > a:focus {
    margin: 13px 0 0 !important;
    padding: 2px 5px !important;
    background-color: #1971b9 !important;
    color: #fff!important;
    font-size: 180%!important;
    margin-right: -10px;
}

I had tried to get rid of the padding 

 padding: 2px 5px !important;

But this actually seems to increase the padding (???)

enter image description here

In Appearance --> Widgets (this is a WordPress site, by the way), I can also see that the HTML for "Header Social Media" is as follows:

<ul class="nav navbar-nav navbar-right social-links hidden-xs hidden-
sm">
    <li>
        <a href="#">
        <i class="fa fa-facebook-square" aria-hidden="true"></i>
        </a>
    </li>

    <li>
        <a href="#">
        <i class="fa fa-twitter-square" aria-hidden="true"></i>
        </a>
    </li>

    <li>
        <a href="#">
        <i class="fa fa-linkedin-square" aria-hidden="true"></i>
        </a>
    </li>
</ul>

Do I need to change anything here or over in the CSS? How? Thank you!

EDIT - Updated CSS:

.secondary-navbar .social-links > li > a {
    /*margin: 13px 0 0;*/
    margin: 13px 5px 0;
    padding: 2px 5px;
    background-color: #1a3664;
    color: #fff;
    font-size: 180%;
    /*margin-right:-10px;*/
    /*padding: 2px 5px !important;*/
    padding: 0px !important;

}

.secondary-navbar .social-links > li > a:hover ,
.secondary-navbar .social-links > li > a:focus {
    /*margin: 13px 0 0 !important;*/
    margin: 13px 5px 0!imporant;
    /*padding: 2px 5px !important;*/
    padding: 0px !important;
    background-color: #1971b9 !important;
    color: #fff!important;
    font-size: 180%!important;
    margin-right:-10px;
}

Upvotes: 0

Views: 404

Answers (1)

XYZ
XYZ

Reputation: 4480

.secondary-navbar .social-links > li > a {
  margin: 13px 5px 0;
  padding: 2px 5px;
  background-color: #1a3664;
  color: #fff;
  font-size: 180%;
  /* margin-right: -10px; */
  padding: 0px !important;
}

and on hover social links 



.secondary-navbar .social-links > li > a:hover, .secondary-navbar   .social-links > li > a:focus {
    margin: 13px 5px 0 !important;
   padding: 0px !important;
  background-color: #1971b9 !important;
  color: #fff!important;
  font-size: 180%!important;
  margin-right: -10px;}

Try removing the margin-right and add padding: 0px !important to the social links and give margin to it

Upvotes: 1

Related Questions