Navigation Bar changes based on window size?

Question

I am running media queries in my overall document, but here I just want to explain what's going on. Is it possible to get this menu to stay centred no matter what device it's on? So when there isn't enough room to allow all menu items to stay on one line, it puts the rest on the line below but then centres those on the screen, rather than starting a new line from the left? It probably has something to do with my float left on the menu but that's the only way I can keep them horizontal for my scroll bar. Thank you.

HTML and CSS below but I recommend viewing it on JSFiddle: https://jsfiddle.net/rt518s7p/

HTML:

<nav id="page-navigation">
      <ul>
            <li><a href="../../index.html" title="Home">Home</a></li>
                <ul class="top-menu">
                    <li><a href="../../_portfolio/photography.html" onclick="return false">Photography</a>
                    <ul class="sub-menu">
                        <li><a href="../../_portfolio/_photography/bmc-himley-mini-show-2015.html">BMC Himley Mini Show 2015</a></li>
                        <li><a href="../../_portfolio/_photography/kinver-snow.html">Kinver Snow</a></li>
                        <li><a href="../../_portfolio/_photography/mini-runs-collection.html">"Mini Runs" Collection</a></li>
                        <li><a href="../../_portfolio/_photography/hofner-bass.html">Hofner Bass</a></li>
                        <li><a href="../../_portfolio/_photography/nature.html">Nature</a></li>
                        <li><a href="../../_portfolio/_photography/haynes-motor-museum.html">Haynes Motor Museum</a></li>
                        <li><a href="../../_portfolio/_photography/miscellaneous.html">Miscellaneous</a></li>
                        <li><a href="../../_portfolio/_photography/classic-mini.html">Classic Mini</a></li>
                    </ul>
                </li>
                    <li><a href="../../_portfolio/graphic-design.html" onclick="return false">Graphic Design</a>
                    <ul class="sub-menu">
                        <li><a href="../../_portfolio/_graphic-design/story-bag-artwork.html">"Story Bag" Artwork</a></li>
                        <li><a href="../../_portfolio/_graphic-design/business-cards.html">Business Cards</a></li>
                        <li><a href="../../_portfolio/_graphic-design/logo-design.html">Logo Design</a></li>
                        <li><a href="../../_portfolio/_graphic-design/the-mexican-job.html">"The Mexican Job"</a></li>
                        <li><a href="../../_portfolio/_graphic-design/magazine-covers.html">Magazine Covers</a></li>
                        <li><a href="../../_portfolio/_graphic-design/wpap-artwork.html">WPAP Artwork</a></li>
                        <li><a href="../../_portfolio/_graphic-design/lyric-posters.html">Lyrics Posters</a></li>
                    </ul>
                </li>
                    <li><a href="../../_portfolio/3d-modelling.html">3D Modelling</a></li>
                </ul>
            <li><a href="../../about.html">About</a></li>
            <li><a href="../../recognition.html">Recognition</a></li>
      </ul>
  </nav>

CSS:

    /*navigation*/
#page-navigation
{
    width: 70%;
    height: 53px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

#page-navigation ul li
{
    color: white;
    list-style: none;
    background-color: darkslategray;
    width: 9em;
    float: left;
}

li
{
    position: relative;
}

li.title
{
    display: none;   
}

li a
{
    display: block;
    color: white;
    line-height: 1.3em;
    padding: 1em;
    text-align: center;
}

li a:link
{
    text-decoration: none;
}

li a:visited
{
    text-decoration: none;
    color: white;
}

li a:hover, .top-menu > li:hover > a
{
    background-color: rgb(48,48,48);
}

li a:active
{
    background-color: dimgray;
}

ul.sub-menu
{
    width: auto;
    height: auto;
    position: absolute;
    left: -9000em;
    overflow: hidden;
}

ul.sub-menu li
{
    clear: left;
    float: none;
    margin-left: -2.5em;
    z-index: 1000;
}

.top-menu li:hover ul
{
    left: 0;
}

ul.sub-menu li a
{
    height: auto;
    border-bottom: 1px solid gray;
    padding: .4em 1em;
    background-color: dimgray;
    padding-top: 1em;
    padding-bottom: 1em;
}

ul.sub-menu li:last-child a
{
    border-bottom: none;
}

ul.sub-menu li a:hover
{
    background-color: darkslategray;
}

ul.sub-menu li a:active
{
    background-color: gray;
}

ul.top-menu
{
    padding: 0;   
}

Try not to post the same questions when you don't find an answer, but update the one you have already posted with new information: http://stackoverflow.com/questions/32442870/center-nav-bar-when-window-resized/ — Callan Heard, Sep 08 '15 at 12:26

score 1 · Answer 1 · edited May 23 '17 at 12:00

Answer:

Because of the way your HTML document is structured, it's not possible for you to get the intended effect for the following reason:

You have an unordered list nested directly in another unordered list which is (1) not considered correct (see this discussion); but more importantly, while it looks like your navigation has 6 top level items, you really only have 4. So no matter what CSS you apply to it, it won't work.

Recommendations:

Fix the structure of your HTML document first by using the proper classes only on the top navigation items and properly nest your navigation items.*
I would advise restructuring you information architecture to contain less navigation items on the menu. For example, the recognition would make sense to go in your About page. And if this is a portfolio type website, collapsing your Photography, Graphic Design, and 3D Modeling into Projects would work well. And if you're concerned with the separation, that will happen within the page as a sub-navigation.
If you are set on keeping the navigation structure, it's advisable to either collapse your menu into a select menu or hamburger menu on mobile devices since having a large chunk someone's mobile device screen consumed by your navigation is not a good experience for your user. On top of it, you have to consider that users can't "hover" on mobile devices and the size of those dropdowns would be difficult to navigate at best.

*Solution: Demo

HTML (Fixed):

<nav id="page-navigation">
  <ul>
    <li><a href="../../index.html" title="Home">Home</a></li>
    <li class="top-menu"><a href="../../_portfolio/photography.html" onclick="return false">Photography</a>
      <ul class="sub-menu">
        <li><a href="../../_portfolio/_photography/bmc-himley-mini-show-2015.html">BMC Himley Mini Show 2015</a></li>
        <li><a href="../../_portfolio/_photography/kinver-snow.html">Kinver Snow</a></li>
        <li><a href="../../_portfolio/_photography/mini-runs-collection.html">"Mini Runs" Collection</a></li>
        <li><a href="../../_portfolio/_photography/hofner-bass.html">Hofner Bass</a></li>
        <li><a href="../../_portfolio/_photography/nature.html">Nature</a></li>
        <li><a href="../../_portfolio/_photography/haynes-motor-museum.html">Haynes Motor Museum</a></li>
        <li><a href="../../_portfolio/_photography/miscellaneous.html">Miscellaneous</a></li>
        <li><a href="../../_portfolio/_photography/classic-mini.html">Classic Mini</a></li>
      </ul>
    </li>
    <li class="top-menu"><a href="../../_portfolio/graphic-design.html" onclick="return false">Graphic Design</a>
      <ul class="sub-menu">
        <li><a href="../../_portfolio/_graphic-design/story-bag-artwork.html">"Story Bag" Artwork</a></li>
        <li><a href="../../_portfolio/_graphic-design/business-cards.html">Business Cards</a></li>
        <li><a href="../../_portfolio/_graphic-design/logo-design.html">Logo Design</a></li>
        <li><a href="../../_portfolio/_graphic-design/the-mexican-job.html">"The Mexican Job"</a></li>
        <li><a href="../../_portfolio/_graphic-design/magazine-covers.html">Magazine Covers</a></li>
        <li><a href="../../_portfolio/_graphic-design/wpap-artwork.html">WPAP Artwork</a></li>
        <li><a href="../../_portfolio/_graphic-design/lyric-posters.html">Lyrics Posters</a></li>
      </ul>
    </li>
    <li><a href="../../_portfolio/3d-modelling.html">3D Modelling</a></li>
    <li><a href="../../about.html">About</a></li>
    <li><a href="../../recognition.html">Recognition</a></li>
  </ul>
</nav>

CSS (Fixed and Updated):

/*navigation*/

#page-navigation {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

#page-navigation ul {
  text-align: center;
}

#page-navigation ul li {
  color: white;
  list-style: none;
  background-color: darkslategray;
  width: 9em;
  /* float: left removes any possibility of it centering */
  display: inline-block;
}

li {
  position: relative;
}

li.title {
  display: none;
}

li a {
  display: block;
  color: white;
  line-height: 1.3em;
  padding: 1em;
  text-align: center;
}

li a:link {
  text-decoration: none;
}

li a:visited {
  text-decoration: none;
  color: white;
}

li a:hover,
.top-menu > li:hover > a {
  background-color: rgb(48, 48, 48);
}

li a:active {
  background-color: dimgray;
}

ul.sub-menu {
  width: auto;
  height: auto;
  position: absolute;
  left: -9000em;
  overflow: hidden;
}

ul.sub-menu li {
  clear: left;
  float: none;
  margin-left: -2.5em;
  z-index: 1000;
}

.top-menu:hover ul {
  left: 0;
}

ul.sub-menu li a {
  height: auto;
  border-bottom: 1px solid gray;
  padding: .4em 1em;
  background-color: dimgray;
  padding-top: 1em;
  padding-bottom: 1em;
}

ul.sub-menu li:last-child a {
  border-bottom: none;
}

ul.sub-menu li a:hover {
  background-color: darkslategray;
}

ul.sub-menu li a:active {
  background-color: gray;
}

ul.top-menu {
  padding: 0;
}

There are still some minor stylings to adjust, but this should get you what you wanted based on your question.

Navigation Bar changes based on window size?

1 Answers1