How do I create a Sticky Nav bar that is centered and adjust to different screen sizes?

Question

I am a newbie at this whole website thing for sure. I want to create a skicky navigation bar similar to the one on happycog.com/ I would like to have 7 or 8 links on the navigation. Can anyone help a noob out please?

Answer 1

I guess you mean css and html.

HTML

<div class="navbar">8 li items</div>

CSS

.navbar {
width:100%;
position:fixed;
top:0;
}

You must give the containing element a width (or everything down from 'html' a 100%).

Answer 2

You could start with a framework like Foundation

Or Bootstrap

It's easier to get started with these as there are lots of documentation and the community is pretty large.

Answer 3

First, realize that you need a container for all 8 links with a specified width like 980 or 1180 pixels. Also, it's important that its parent container (container which contains our links container) has a width of your browser's current length.

So let's say your links container is <div id="links-container"> and contains <a href="#">Home</a><a href="#">Contact Us</a> etc. And the parent of our .links-container is the body tag. -- That's all it for the html, now we go to the styling which we will use is CSS.

We'll style the container (with links) centered by giving it a style property (inline or in css)

.links-container {
    // this will make the container float
    // at the center of its parent container
    margin:0 auto;
    // this will set the container's width
    // if not set, it will inherit its parent's width
    width:980px;
}