CODEWITHSUNDEEP
htmlasp.nettwitter-bootstrap
AXGuy
AXGuy

Reputation: 335

sticky footer below content

I have used Ryan's sticky footer in asp.net project. I have used it on master page and on child master page I have a vertical navbar. The problem is the footer goes behind the navbar. I want it to be on the top of the navbar. Also there is is a scrollable horizontal space on right side in child master page which I dont want. Also some of my pages have less content so how can I change thier height according to my wish so that I can set the footer accordingly.

vertical navbar:

#sidebar-nav ul{
background-color:#2ca8d2;
color: white;
height: 100%;
padding: 0;
position: fixed;
left: 0;
top: 50px;
width: 19%;
z-index: 2;
display:block;
}
#sidebar-nav li a {
display: block;
color: white;
padding: 8px 0 8px 16px;
text-decoration:none;
font-size:16px;
border-bottom: 1px solid #fff;
}

#sidebar-nav li a.active {
background-color: #4CAF50;
color: white;
}

#sidebar-nav li a:hover:not(.active) {
background-color: orangered;
color: white;
}

footer:

 * {
 margin: 0;
 }
 form, html, body {
 height: 100%;
 }

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto 200px;
}
 .footer, .push 
 {
 height: 200px;
 background-color:#333;
 z-index:10;
 }
 .footer, .push {
  clear: both;
  }

Upvotes: 0

Views: 60

Answers (1)

bnned
bnned

Reputation: 23

I want it to be on the top of the navbar.

Since you have 

z-index: 2;

on your vertical navbar, you would need a higher z-index, such as 3, on the main container of your footer. You have z-index 10 on the footer class, but I dont know whats nested in what with your html file. Could you post the html code for the footer and vertical navbar too?

Upvotes: 1

Related Questions