The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Make Nav resize without too many Media Queries

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #163293

    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; } }


    Here is a link to what I’m working on:

    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:


    You could look at using percentages, I have used them on 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!


    I’m with @Rob, just use percentages


    …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’.

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.