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:
And this is what I wish my menu to look like.
You can have a look at the code I wrote on JsFiddle.
How can I make the icons align properly, and easy to adjust?
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: