: How to create an inline horizontal navigation with mixed text and icon links that's easy to adjust, tweak and improve? I'm cutting CSS and facing a problem, if I try to change the line-height,

@LarsenBagley460

If you can change the HTML/markup: just add a class to those two particular elements and style that.

If you can't:
Use nth-child or preferably nth-last-child(n). The latter will count backwards from the last child-element instead of forwards from the first.

The code below would select the last two li elements in a ul container with the class main-nav applied. The > ensures that we only target direct children and not potential sub-menus as well:

ul.main-nav > li:nth-last-child(1) {
// your style
}

ul.main-nav > li:nth-last-child(2) {
// your style
}


Source: css-tricks.com/useful-nth-child-recipies/
If you need to support older browsers (prior to IE 8) you will want to look into the relevant section in this article as well.

Vote Up Vote Down

@Kevin459

I've managed to achieve what you're after.

First off though, your code was very messy and in future you should prune/clean it before asking others to help you fix it. I took a 15 minute look at your code to understand it, and then rewrote the parts you're asking about with much less mess. This is what I get with the structure I've prepared for you:



The main problem with your original structure is that you were implementing the images as background images, which are harder to control, and not so good for your purpose.

I put the images directly into the HTML instead, and controlled their position and size through CSS. On that note, you can't place an <img> tag inside an <li>, so I made the icon elements within the top level list <ul>'s instead, they are lists anyway, aren't they?

I put the 'EN' over the earth icon, I really think it looks a lot better, because everything aligns much more consistently than your original target - but of course it's up to you.

I used the display:table-cell; property on all of the navigation links for it's many great features. It allows better control over spacing and centering content.

Lastly, I restructured the HTML and renamed classes to make it far easier to see what's going on.

Everything is now sitting comfortably in a good position, and responds very well to changing the window size.

Check out your new navigation JSfiddle, it's been on a strict diet, and now it's easy to see what's going on, and much easier to adjust and improve.

Just for flips and wiggles, I decided to make it even better:



Check out the even better version here.

Vote Up Vote Down