[Resolved] How to center icon on navigation menu?

Home Forums Support How to center icon on navigation menu?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #81686
    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

    #81769
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #81888
    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.

    #81964
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #81971
    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.

    #81979
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.