Grow your CSS skills. Land your dream job.

Aligning icon font background in navigation, CSS

  • # October 13, 2012 at 8:09 am

    I am using an icon font for one of the list items in my main navigation.

    I put this icon into it’s own class, and gave it a font size so it matches the rest of the navigation. I also had to assign a specific line height for the icon font so it lines up.

    Now the problem is when I hover over the icon (I am using a background colour), there is a gap underneath which is visible as you hover over it. This wouldn’t be a problem if I wasn’t using a background colour, but I would really like to keep this.

    To illustrate what I mean, you can see the image here… http://dl.dropbox.com/u/94593656/test.jpg

    Any ideas on how I can correct this, so that when you hover, there is no gap underneath?

    I have uploaded the HTML and CSS here… http://codepen.io/anon/pen/xeCLj

    # October 13, 2012 at 10:34 am

    @croydon86 I just changed the iconfont class in your CSS.

    http://codepen.io/anon/pen/sbviC

    This seems to be a lot of markup for a simple menu bar.

    # October 13, 2012 at 12:25 pm

    Hi Christopher, thank you so much, I can’t believe it was just a case of adding an ‘a’ as I had already tried doing the height but that wouldn’t work.

    Yeh you’re right, there is a lot of markup, I am using twitter bootstrap as a base and they use a lot of code.

    Thanks again!!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".