Responsive horizontal menu

Question

I am trying to create menu with fix max-width where width of items in menu will be responsive. I created the samples, where show what i coded.

http://codepen.io/tanotify/pen/asjde

The problem is when i change size of browser everything goes wrong and i do not know how to fix it. The words in navigation can change in future and it is the problem too. The solution which i try to find must be responsive for the words too.

Answer 1

Have you considered something like the third example in http://codepen.io/panchroma/pen/DCshm ?

I've removed the set width for each link

#navigation li{
list-style: none;
display: inline-block;
/* width: 16%; */
}

and used a pixel based padding between links

#navigation-padding li{
list-style: none;
display: inline-block;
/*padding: 0 4.5%; */
padding: 0 10px;
}  

Responsive navbars can be a real challenge ... trying to fit everything into the limited space.

If you need more control over the results, you might want to consider using @media queries, where you specify different CSS styles at different viewports or window sizes.

Start by adding <meta name="viewport" content="width=device-width, initial-scale=1.0"> to the head of your document.

Then at the end of your existing CSS you could add

@media (max-width: 767px) {

#navigation li{
display: box;
}

}  

This would make the nav bar collapse to a vertical list at viewports 767px and below. You can change this pixel width and the css selectors inside to whatever you want.

Here's a link to get you started with what you do using @media queries.

Good luck!