Make Nav resize without too many Media Queries

[oxxi]

I don’t think Im designing my navigation properly in terms of it being responsive. There is no flow when resizing the browser window. I am going to end up using to many media queries to just move the ‘margin-left’ of my ‘nav’ element. Is there a better way to have the navigation automatically adjust while resizing the browser window without having to use so many media queries? Or do I need to redo my navigation css code?

This what I have:

nav{ display: block; margin-right:320px; <==== i want to decrease as window gets smaller float: right; so navigation stays centered. text-align:center; }

//////// my media queries /////////////

@media (max-width:1412px){ nav{ margin-right:250px; } }

@media (max-width:1390px){ nav{ margin-right:210px; } }

@media (max-width:1228px){ nav{ margin-right:110px; } }

@media (max-width:1109px){ nav{ margin-right:60px; } }

[oxxi]

Here is a link to what I’m working on: http://tinyurl.com/n7fkhpy

If you start to resize the window starting from fullscreen width, you can see that the navigation doesn’t smoothly adjust like other responsive sites. I would have to keep adding media queries to keep it centered. I want more of an automatic way. I feel that there must be a better way to code the navigation. Not sure how to explain this too well. I would like it to work similar to this developer’s site: http://trentwalton.com/

[Rob]

You could look at using percentages, I have used them on epicwebs.co.uk and I don’t think they look that bad?

The good thing about percentages is that you can in theory build a site without any media queries (even though I use some to deal with very small screen sizes).

Good luck!

[noahgelman]

I’m with @Rob, just use percentages

[Paulie_D]

…and restructure your header HTML so that things are more or less in the right order as they will appear on screen.

Logo first / Menu second / Icons next

This will make the positioning (how ever you do it) easier.

Then look at using inline-block for the li with text-align:center applied to the ‘ul’.

http://www.ternstyle.us/blog/float-vs-inline-block

If icons need to be no less than a certain size…use min-width in px combined with a width in %

[Author]

Posts