Center Nav Bar when window resized? - html

Question

My navigation bar is centered, but when the window is smaller, it just goes onto the next line, rather than getting smaller to fit the size of the window, and I don't know how to resolve it. It's got drop down elements on it. I'll also be looking at turning this to a vertical list when viewed on mobile devices, but nowhere near doing media queries yet.
Here's my HTML:
<nav id="page-navigation">
<ul>
<li>Home</li>
<ul class="top-menu">
<li>Photography
<ul class="sub-menu">
<li>BMC Himley Mini Show 2015</li>
<li>Kinver Snow</li>
<li>"Mini Runs" Collection</li>
<li>Hofner Bass</li>
<li>Nature</li>
<li>Haynes Motor Museum</li>
<li>Miscellaneous</li>
<li>Classic Mini</li>
</ul>
</li>
<li>Graphic Design
<ul class="sub-menu">
<li>"Story Bag" Artwork</li>
<li>Business Cards</li>
<li>Logo Design</li>
<li>"The Mexican Job"</li>
<li>Magazine Covers</li>
<li>WPAP Artwork</li>
<li>Lyrics Posters</li>
</ul>
</li>
<li>3D Modelling</li>
</ul>
<li>About</li>
<li>Recognition</li>
</ul>
</nav>
And here's my CSS:
/*navigation*/
#page-navigation
{
width: 60%;
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;
}
Thank you.

Answer 1

Your menu is specified as a variable width of 60%:
#page-navigation
{
width: 60%;
...
}
This will cause the width of the bar to scale with the window, and affect the position of the elements within it. To prevent this, specify a static width, such as:
#page-navigation
{
width: 1000px;
...
}

Answer 2

I just insert a line of code and I think it looks pretty nice right now :)
ul.top-menu{
padding: 0;
}
If you resize the screen there is in front of the navigation (next line) a small space and this resolves the problem.
See the resolution also on jsfiddle.

Answer 3

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>Home</li>
<li class="top-menu">Photography
<ul class="sub-menu">
<li>BMC Himley Mini Show 2015</li>
<li>Kinver Snow</li>
<li>"Mini Runs" Collection</li>
<li>Hofner Bass</li>
<li>Nature</li>
<li>Haynes Motor Museum</li>
<li>Miscellaneous</li>
<li>Classic Mini</li>
</ul>
</li>
<li class="top-menu">Graphic Design
<ul class="sub-menu">
<li>"Story Bag" Artwork</li>
<li>Business Cards</li>
<li>Logo Design</li>
<li>"The Mexican Job"</li>
<li>Magazine Covers</li>
<li>WPAP Artwork</li>
<li>Lyrics Posters</li>
</ul>
</li>
<li>3D Modelling</li>
<li>About</li>
<li>Recognition</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.