HTML/CSS Space Above NavBar and won't stay fixed

Question

I cant seem to make my navbar sticky, nor make my navbar have no space above it.
The URL to my site is: http://cudahost.com/new
CSS is Like:

body {
    font-size: 12px;
    line-height: 22px;
    font-family: Arial, Helvetica, Sans-Serif;
    color: #555;
    background-image:url('images/bg.png');
}

#navtopstick {
    background: inherit;
    height: auto;
    margin-top: -10px;
    position: fixed;
    z-index: 10;
}

/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
h1 { font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; text-align: center; color: #000; font-size:60px; letter-spacing:-1px; }
h1 small{ font-size: 24px; display: block; color: #636363; }

/* COMMON CLASSES */
.break { clear:both; }

/* WRAPPER */
#wrapper { width:980px; margin:40px auto; }

/* CONTENT */
#content { margin-top:50px; }
#content p { font: 14px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; color:#333333; line-height:18px; margin:15px auto; width:800px; }
#content p a { color:#0088CC; text-decoration:none; }
#content p a:hover { text-decoration:underline; }

/* STYLE NAVIGATION MENU */
#appleNav { margin:40px 0; list-style:none;

    /* Lucinda Grande is the font used */
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:13px;

    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 -1px 3px #202020;

    width:980px; height:34px;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;

    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
    position: fixed;
}

#FooterWrapper {
    width: 100%;    
    max-width: 980px;
    margin: auto;
    bottom:0;
    background: url(images/darker.png);
} 


#footer {
    background: url(images/darker.png);
    width: 100%;
    float:left;
    bottom:0;
} 

    .footerFloat h3{ font-size: 20px; color: #0431B4; margin-bottom: 10px; text-transform: none; font-weight: bold; }
    .footerFloat a{ color: #04B431; margin-bottom: 10px; text-transform: none; font-weight: bold; }
    .footerFloat a:link { color: #04B431; text-decoration: none}
    .footerFloat a:visited { color: #04B431; text-decoration: none}
    .footerFloat a:hover { color: #04B431; text-decoration: underline}
    .footerFloatLast h3{ font-size: 20px; color: #0431B4; margin-bottom: 10px; text-transform: none; font-weight: bold; }

.footerFloatLogo {
    width: 40%;
    float: left;
    min-width:200px;
    bottom:0;
}

.footerFloat {
    width: 25%;
    float: left;
    min-width:200px;
    bottom:0;
}

.footerFloatLast {
    width: 30%;
    float: left;
    min-width:200px;
    bottom:0;
}

#wrapper {
    width: 100%;
    overflow:hidden;
} 

#appleNav li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:105px; height:34px; border-bottom:1px solid #575757; border-top:1px solid #797979;

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
}

/* Set the states when hovering */
#appleNav li:not(:last-child):hover {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */

    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: inset 0 0 5px 5px #535353;
    -webkit-box-shadow: inset 0 0 5px 5px #535353;
    box-shadow: inset 0 0 5px 5px #535353;
}

/* When the user clicks the button, */
#appleNav li:not(:last-child):active {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */

    -moz-box-shadow: inset 0 1px 2px 2px #000;
    -webkit-box-shadow: inset 0 1px 2px 2px #000;
    box-shadow: inset 0 1px 2px 2px #000;
}

#appleNav li a { color:white; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; }

/* Styling of the search field */
#appleNav form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;

    /* CSS3 multiple backgrounds for the input field: The magnifier image and the gradient background */    
    background-image: url("../images/magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
    background-image: url("../images/magnifier.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;

    background-color:#6E6E6E; /* Fallback */

    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
}

/* Rounded corner for the first in last item. Shorthand: Top left, Top right, Bottom right, Bottom left. */
#appleNav li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;

    border-left:none;
}

#appleNav li:first-child a img {
   vertical-align:middle; margin-top:-2px;
}

#appleNav li:last-child {
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0 4px 4px 0;
    border-radius:0 4px 4px 0;

    border-right:none;
    width:124px;
}

/* Fade in animation (Webkit only) */
@-webkit-keyframes showMenu {
    from { opacity: 0; top:-20px; }
    to   { opacity: 1; }
}

#appleNav {
     -webkit-animation: showMenu 1s; position:relative;
}

Can somebody help me fix this please? If possible I would like my navbar to be sticky at the top always, but it doesn't seem to work.

Also on another note, if possible can you explain how I fix my code to make my footer be at the bottom of the page, not sticky or fixed, but so it gets 'pushed' to the bottom even if there's not enough content, stopping it from sitting half way up the page.

Thanks a lot, hope to get some help soon.

-------- UPDATE -------- Thanks to people answering, I've fixed most of the problem, now I just want to add a bit of space above the footer so its not right above the text, is it possible to do this with above padding or a margin? Not sure how to do this, any help would be appreciated.

for the page you have provided I dont see any need for fixed navbar or any such thing as there is no scroll in it. — Harshada Chavan, Jan 21 '14 at 11:02
There is currently no scroll as I'm developing the page, but there will be. Thanks to everyone whos commented, but I'm still a little unsure exactly what I need to do :/ — user3218815, Jan 21 '14 at 11:09
Copy the code of my answer and try it and see if it is you want. You onlye have to replace margins and add the footerwrapper. — Gaucho_9, Jan 21 '14 at 11:13

score 0 · Answer 1 · answered Jan 21 '14 at 11:03

0

Try this code, change your margins width these, and add the code fotterwrapper:

#wrapper {
  margin: 0 auto;
}

#content {
  margin-top: 0;
}

#appleNav {
  margin: 0 0 20px 0;
}

#footerwrapper{
  position: absolute;
  bottom: 0;
  width: 100%;
}

answered Jan 21 '14 at 11:03

Gaucho_9

265
1
3
11

Thanks! That fixed the footer to the bottom. Now I have to be rude and ask another question, is there any way I can make the header a bit taller, because at the minute the content JUST its, and I need to give it some space so it looks better and it looks as though the background is just black, but I want it to be background: url(images/darker.png); – user3218815 Jan 21 '14 at 11:27
add `#appleNav li{ padding: 5px 0;}` and `#appleNav { height: 44px}` and remove the `overflow:hidden` property in `#wrapper` – Gaucho_9 Jan 21 '14 at 12:44

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

There are plenty of tutorials out there for the footer, I followed:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

however there is also a stack question already on it:

CSS to make HTML page footer stay at bottom of the page with a minimum height

might make for an interesting read

edited May 23 '17 at 10:25

Community

1
1

answered Jan 21 '14 at 11:06

Marriott81

275
2
16

score 0 · Accepted Answer · answered Jan 21 '14 at 11:10

0

Remove the margin on wrapper. Remove the position: relative; and margin statements on #applenav and set the position: fixed on navtopstick instead of #applenav. Than, remove the margin @ #content and you are good to go! In this case, your navigation will be fixed above and you can stylize it further.

If you stick to the style you have used now, you won't get it to work.

answered Jan 21 '14 at 11:10

Siyah

2,852
5
37
63

Wow thanks, that fixed the header issue, thanks a lot! Any idea how to fix the footer issue so it's pushed to the bottom? – user3218815 Jan 21 '14 at 11:23

HTML/CSS Space Above NavBar and won't stay fixed

3 Answers3