How do I create a horizontally centered navigation bar that's fixed to the top of the screen and resizes to work on all screen sizes?

Question

I am trying to create a simple navigation menu that is fixed to the top of the screen, and will take up 10% of any screen's height. I also would like the navigation bar to be functional on all devices regardless of screen height and width; what I currently have gets messed up quite horribly if you should resize your screen or have a resolution that is naturally low. Also, I would like to have the text for each tab to be centered vertically, a task I am struggling to fix, having tried many methods, such as changing the padding, vertical-align, margins, and so on. I have searched and searched and tried many different approaches, such as using JavaScript to accomplish this, all without luck.

My current css:

        #nav {
            height:10%;
            background-color:rgb(52, 152, 219);
            position:fixed;
            top:0;
            left:0;
            width:100%;
            color:white;
            font-family: Calibri;
            font-size:24pt;
            text-align:center;
        }

        #nav a {
            display:inline-block;
            height:100%;
            padding-left:15px;
            padding-right:15px;
        }
        #nav a:hover {
            background-color:rgb(41, 128, 185);
        }

And my HTML:

     <div id="main">
        <div id="nav">
            <a>Home</a>
            <a>Page2</a>
            <a>Page3</a>
            <a>Page4</a>
            <a>Page5</a>

        </div>
    </div>

Thanks!

Answer 1

I fixed a couple things in your css and wrapped the links in div's.

        #nav {
            height:10%;
            background-color:rgb(52, 152, 219);
            position:fixed;
            top:0;
            left:0;
            width:100%;
            color:white;
            font-family: Calibri;
            font-size:24pt;
            text-align:center;
        }

        #nav div {
            display:inline-block;
            padding:15px;
        }
        #nav div:hover {
            background-color:rgb(41, 128, 185);
            cursor:pointer;
        }

And the HTML

     <div id="main">
        <div id="nav">
            <div><a>Home</a></div>
            <div><a>Page2</a></div>
            <div><a>Page3</a></div>
            <div><a>Page4</a></div>
            <div><a>Page5</a></div>
        </div>
    </div>

Looked ok on browser resize, let me know if that's still an issue.

Answer 2

You can add to your nav css "z-index: -1;" to set it behind the rest of the content. You may need to add "z-index: -2; to you body css to keep your background image behind the nav bar. That should fix it to the top of your screen at least and have it remain there while the rest of the content scrolls

As for having the sizing go crazy, it's because you have a set font size. I think setting your font size to 2em will keep it at 24 for common size screens, but will allow it to adjust to smaller windows.