How can I make a responsive navbar that is fixed to the top of the screen

0
votes

I'm attempting to create a responsive navbar that is fixed at the top of the page, and with the links full height (100%) so that their background colors can change. I've so far only succeeded in making the navbar fixed, and the links are only somewhat compatible across devices. I'm going for this effect, where the media queries force the menu into a nav contained in an image. http://getbootstrap.com/examples/navbar-fixed-top/. I dislike bootstrap, and I want to be able to do this on my own in the future. Any tips?

Here is the code I have:

Jade:

head

link(rel="stylesheet", href="/main.css")

nav

ul

   li

       a(href="/") Home

       a(href="/about") About

       a(href="/contact") Contact

and

LESS:

nav {

width:100%;

height:3em;

top:0px;

left:0px;

position:fixed;

background-color:#000;

ul li a {

   height:100%;

   text-align:center;

   margin-top: -3.5em;

   text-decoration:none;

   padding-right: 9%;

   padding-left: 9%;

   &:hover {

       color:#7f8c8d;

   }

}

}

1
htmlcsspug

1 Answers

0
votes

I would rethink the fixed positioning of your header and incorporate an absolute method instead. I personally don't like having a header constantly in my way, but the absolute can be changed to fixed easily with the below code.

Here is the way I would typically do it to ensure that everything will stay up top.

HTML

<div id="wrapper">
<ul id="navBar">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
</div>

CSS

html, body {
    margin:0;
    padding:0;
    min-width:100%;
    min-height:100%;
}
#wrapper {
    background:#AAA;
    width:100%;
    position:absolute;
    left:0;
    top:0;
}
ul {
    padding:0;
    margin:0;
}
li {
    float:left;
    min-width:50px;
    background:#CCC;
    list-style:none;
    vertical-align:middle;
    padding:15px;
}
li a {  
    color:#000;
}

Or fiddle away yourself:

JS FIDDLE: http://jsfiddle.net/SinisterSystems/d83H3/1/

EDIT:

Try this for your media query quarrels. You can resize the fiddle window. Try to reduce it to 300px or less for the bottom right preview window.

JS FIDDLE: http://jsfiddle.net/SinisterSystems/d83H3/2/