Styling icon and text to change color at the same time

Hi Julie MacCluskey ,

First of all, I must say I am all admiration for your work. It show true passion and commitment!

Secondly, I humbly forked it and tried to find a way to do what you were trying to do (which is only a final touch in an already really accomplished site!). Unfortunately, I am far from being such an expert like you in the Github thing (it's definitely in my ever growing to-do-list!), so I still don't know exactly how to push it, or I may know some Git, but may feel fear to make a mess, so I better abstained for now. :)

Well, after some interesting while trying, I finally could do it (or at least, I hope I understood correctly what you want to achieve).

Firstly, this is the css (well, obviously, only the part I modified):

header nav ul li a svg {
    height: 13px;
    padding: 1em 0 1em 1em;
}

.nav-button {
    float: right;
    padding-top: 1em;
    margin-right: 3em;
}

.black {
    transition: transform .5s ease-in-out;
    transform-origin: 50% 50%;
}

.nav-link:hover .black {
    transform: scale(1.7);
    fill: #39add1;
}

Such a brief code, and it takes such a long while! :)

Well, now my explanation of the whats and whys.

• Added 1em of padding in all except right to each svg of the nav.

• Added class 'nav-button' (name could be anything else) to the <span>s at the side of each icon.

• Since you've already made inline-block every li of the nav, I floated the .nav-button to the right of the li, and centered it "manually", adding 1em of padding-top. I also added 3em of margin-right but that's more personal preference, so you can try it and remove it if you don't really like it. :)

• Then, changed the selector for the transition and transform-origin properties, I assigned to the .black selector (the path itself).

• Same with the selector for the transform and fill properties, they now belong to the .nav-link:hover .black. Now, a couple of clarifications with regards to this one:

1. Actually, up until now, you don't have any other <a>s on your page and that's alright, but considering maybe in the future you will add some, I thought it was safer to create a class exclusive for the navigation links. That's why I mentioned .nav-link. That is what that class is (obviously, I first added the class in the html).

2. I noticed you were trying to apply the :hover to the last selector and that does the work in many cases. However, again, if I did understand your concern correctly, you wanted to trigger an action not only in the event triggered but also in another one. That's what you can do with .nav-link:hover .black. Basically, you are saying: "Hey, browser, when the user does hover on any .nav-link apply the following rule to .black" (or :hover on .nav-link, then to .black goes this {rule}).

NOTE: Just if you try it, remember adding the classes to the html. I didn't do it here to not add too much code unnecessarily.

Hope this was what you wanted, and that it helped you somehow. It was great fun to me, too!