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, 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?

Answer

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.

Attribution
Source : Link , Question Author : php.dev.2014 , Answer Author : Community

Leave a Comment