[Resolved] How to center icon on navigation menu?

[George]

I’ve added a twitter icon to my navigation menu, but I increased the size a bit. When the size is increased, it tends to shift the placement of the icon higher, so it is no longer evenly spaced between top and bottom of the navigation bar. I used this CSS to bring it down:

.twitter-menu-icon {
	float: right !important;
	position: absolute;
	transform: translateY(8%);
}

The problem is that shifting the icon also shifts the highlight box down as well. When you hover the icon, the box is no longer completely on the navigation bar and looks funny. Here’s the site to take a look: http://georgebeckham.com

[Tom]

Hmm, remove that transform and absolute CSS, and remove the 2x class from the icon.

Then try this CSS:

.twitter-menu-icon a {
      font-size: 17px !important;
}

[George]

It didn’t seem to work. The icon (and highlight box) is centered again, but the icon is small. If for whatever reason it isn’t possible, it isn’t the end of the world to have a small icon.

[Tom]

Looks like you’re missing the “a” after “.twitter-menu-icon” in your CSS.

It should be:

.twitter-menu-icon a {
      font-size: 17px !important;
}

[George]

Ah I see. I thought I could get away with just adding the font size arguments within the same section where I included the “float” option. It works great now! Thanks a ton for your help.

[Tom]

You’re welcome 🙂

[Author]

Posts