Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
    
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 at 12:37

2 Answers 2

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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