How to get html5/css3 navigation bar to align at the top? - html

Question

I'm building myself a website on html css etc. (college work so that's a reason why) however I've had struggle with my navigation bar.
The first thing is that it goes to the side of the page which I don't want. I want it at the top like for example the bar at the top of stack overflow. I'm using flexbox for my navigation bar and i like the sizes of each section. My code is:
body {
background-color: #000000;
color: #FFFFFF;
font-family: Georgia;
}
nav {
background-color: #000000;
color: #888;
margin: 0px 0px 0px 0px;
overflow: hidden;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
nav ul {
float: left;
display: block;
margin: 0;
padding: 0;
}
nav ul li {
float: top;
list-style: none;
text-align: center;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 56px;
padding: 0;
text-decoration: none;
text-align: center;
}
nav > ul > li:hover > a {
color: rgb(255, 255, 255);
}
<nav>
<ul>
<li>
<h1>Title</h1>
</li>
<li>Home
</li>
<li>Forum
</li>
<li>Music
</li>
<li>About
</li>
<li>Shop
</li>
</ul>
</nav>

Answer 1

float:top
Is invalid.
The CSS float property can be declared as left || right, or left as it is
Floating elements can be tricky at the best of times. Instead, you could use something like display:inline-block instead.
more info on floating elements
All about floats
A float is a box that is shifted to the left or right on the current
line. The most interesting characteristic of a float (or "floated" or
"floating" box) is that content may flow along its side (or be
prohibited from doing so by the 'clear' property). Content flows down
the right side of a left-floated box and down the left side of a
right-floated box. The following is an introduction to float
positioning and content flow; the exact rules governing float behavior
are given in the description of the 'float' property. ~ w3.org
DEMO:
nav ul li {
display:inline-block;
vertical-align:middle;
list-style: none;
text-align: center;
}
body {
background-color: #000000;
color: #FFFFFF;
font-family: Georgia;
}
nav {
background-color: #000000;
color: #888;
margin: 0px 0px 0px 0px;
overflow: hidden;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
nav ul {
display: inline-block;
margin: 0;
padding: 0;
}
nav ul li {
display:inline-block;
vertical-align:middle;
list-style: none;
text-align: center;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 56px;
padding: 0;
text-decoration: none;
text-align: center;
}
nav > ul > li:hover > a {
color: rgb(255, 255, 255);
}
<nav>
<ul>
<li>
<h1>Title</h1>
</li>
<li>Home
</li>
<li>Forum
</li>
<li>Music
</li>
<li>About
</li>
<li>Shop
</li>
</ul>
</nav>

Answer 2

you are doing a great job. I would like to suggest a few things as I have already experienced some problems.
Use Bootstrap. All you need to do is include a CSS and a JavaScript file and write navbar in class = "navbar navbar-default navbar-fixed-top" and automatically it will be placed at the top with much better looks and having responsive design. It is not difficult at all. It will hardly take and hour or two to understand and implement it in your website.