Add & Style Genericons in Nav

[Zach Russell]

I am trying to add the home Genericon to the nav bar in my site, and am struggling to do so. I was able to add the genericon as a nav item (an "empty" &nbsp nav item with classes of genericon and genericon-home), and get the color and positioning right. I now want to make the icon bigger (to look normal) and I can't seem to be able to increase the font size. You can see that I was able to do it for the other genericons on my site.

I appreciate your help in advance!

---

———-
Zach Russell
President, ProTech Internet Group

http://zachrussell.net

[nutsandbolts]

Try finding this in your stylesheet:

.genesis-nav-menu .genericon {
color: #000;
vertical-align: middle;
}

and changing it to this:

.genesis-nav-menu .genericon {
color: #000;
vertical-align: middle;
font-size: 26px;
margin-bottom: 10px;
margin-right: 20px;
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Zach Russell]

Thank you Andrea, that fixed part of it, but, there is still an issue with it not being clickable. Somehow the clickable space of the link is being pushed down to below the button. Try to click the home button on my site and you'll see what I mean.

Thanks again for your help!

---

———-
Zach Russell
President, ProTech Internet Group

[nutsandbolts]

I think the   in the menu item may be the culprit here, though it's hard to tell. I'm assuming if you give it a label like Home it shows the word "home" in the menu. You could try doing it that way, then doing something like this to hide the text:

.genesis-nav-menu .genericon {
color: #000;
vertical-align: middle;
font-size: 26px;
margin-bottom: 10px;
margin-right: 20px;
text-indent: -9999px;
}

I'm not 100% sure that will address the issue since I can't see the back end of the site, but it might be worth a shot.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Zach Russell]

Thanks for your swift response. I added the home text and text-indent and the result wasn't what you predicted 🙂

Check out the site and see for yourself, please.

---

———-
Zach Russell
President, ProTech Internet Group

[nutsandbolts]

Ha! Definitely not what I had in mind.

Let me play with this on a test site for a bit and I'll see if I can get it to behave.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[nutsandbolts]

Okay, here's what I got on a test site (it's using Metro Pro but it should work the same way regardless of theme):

I used the Links option on the left in Appearance > Menu and entered the URL manually, then for the link text, I put in the following:

<div class="genericon genericon-home"></div>

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Zach Russell]

Andrea, that worked! Wow that's hackey though 🙂

Thanks a ton for your help!

---

———-
Zach Russell
President, ProTech Internet Group

[Author]

Posts