I'm cutting CSS and facing a problem, if I try to change the line-height, padding, margin of any of the last 2 items of the menu, other items will be affected. Here is the screenshot of my current menu:

current menu layout

And this is what I wish my menu to look like.

target menu layout

You can have a look at the code I wrote on JsFiddle.

How can I make the icons align properly, and easy to adjust?

  • Remove the overflow:hidden; property from the menu and adjust the other menu items to align to the bottom of the li.
    – Scott
    Jul 22 '14 at 12:37

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:

enter image description here

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:

enter image description here

Check out the even better version here.


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: http://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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.