I'm having a problem trying to get both a fixed top navigation and a sticky footer to work, without hiding the footer 40px off the bottom. The jquery script i'm using is meant to fix this, but it doesn't. I can't use bootstrap or anything similar. So this is my only option.
The HTML
<div id="container">
<nav role="navigation" id="cssmenu">
<ul>
<li class="active">Home</li>
<li class="has-sub">Courses
<ul>
<li><span>Digital Media</span></li>
<li><span>Web Development</span></li>
<li><span>Journalism</span></li>
<li class="last"><span>Information & Communications</span></li>
</ul>
</li>
</ul>
<div id="wrapper">
<header role="banner" id="banner">
<div class="not-fullscreen background" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_6643.jpg');" data-img-width="1600" data-img-height="1064">
<div class="content-a">
<div class="content-b">
<h1>header1</h1>
<h2>header 2</h2>
</div>
</div>
</div>
</header>
<div class="content">
<main role="main" id="skipnav">
<p>Intro paragraph</p>
</main>
</div>
</div>
<footer class="footer" id="footer">
<div class="container2">
<p>footer</p>
</div>
</footer>
</div>
The Jquery script -
$(document).ready(function(){
var footer_height=$("#footer").height();
$("#wrapper").css({
'padding-bottom' : footer_height
});
});
Css can be found here
The full website can be found here
Thanks in advance.
you can do using css only no need to use jquery
#footer {
bottom: 0;
position: fixed;
}
nav {
top : 0;
position: fixed;
}
You need to place footer inside wrapper and use position fixed for the footer instead of position absolute; Furthermore, the only reason to use jQuery to calculate the padding is if your footer does not have fixed height (now you use height: 40px). You also need to give to your wrapper padding top = height of your header.
Try this:
#footer {
position: fixed;
bottom: 0px;
width: 100%;
left: 0px;
height: auto;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
/* padding: calculated 0 calculated; */
#container {
position: relative;
width: 100%;
height: 100%;
}
Few things to change:
body was having padding-top:40px; which is making the body to overflow. So remove that padding from body.
and #wrapper need to be:
#wrapper {
position: absolute;
width: 100%;
height: 100%;
}
remove that jquery part and padding-bottom line from wrapper.
and make footer to be position: fixed;
Related
I am trying to have a menu that takes up 100vh when the menu button is clicked. However, I also have a header at the top so the menu content is lower than it. How do I make the menu go on top of the header? I'm trying to do this without making the header display: none because I want it to be shown on the side - in the left over space from making the menu have a view width of 80vw.
header {
height: 3.4rem;
display: grid;
align-items: center;
z-index: 1;
}
.menu {
z-index: 2;
position: relative;
background-color: #000;
margin-left: 4rem;
}
.menu-container {
width: 80vw;
height: 100vh;
margin-left: 2.5rem;
margin-top: 2rem;
}
<header>
<div class="header-container">
<div class="left">
<img src="img/logo.jpg" alt="">
</div>
<div class="right">
<img src="img/user.png" alt="">
<i class="fa-solid fa-bars fa-xl"></i>
</div>
</div>
</header>
<nav class="menu">
<div class="menu-container">
<div class="top-menu">
Premium
Support
Download
<div class="menu-line"></div>
</div>
<div class="bottom-menu">
Account
Log out
</div>
<img src="img/logo.jpg" alt="">
</div>
</nav>
(I did not add all the CSS to do with the menu and header because the rest of it is irrelevant.)
How do I move the menu to go on top?
I think position: relative is not set properly, it should only be on a parent that contains both header and nav. And then set the following css :
.menu {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 80vw;
}
Add margin and background if you want.
Now nav should be above header.
I believe the issue lies in the position and z-index of your .menu and header css. Try making the position: absolute for both absolute and change the z-index of menu to 1 and header to 2 so that it shows menu on top of header.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
So I'm trying to animate a sidebar sliding in from the left, and the animation works well but it makes the other element, which uses flex for sizing, jumpy while it automatically resizes. This is what it looks like:
Here's some of my CSS:
body{
display: flex;
}
#sidebar{
display: none;
float: left;
height: 100%;
position: relative;
padding-left: 20px;
padding-right: 20px;
}
#mainScreen{
float: right;
height: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
}
And here's my basic HTML structure:
<body>
<div id="sidebar>
<!-- stuff -->
</div>
<div id="mainScreen">
<div id="headerCont"><!-- stuff --></div>
<div id="messageCont"><!-- stuff --></div>
<div id="chatInputCont"><!-- stuff --></div>
</div>
</body>
And the children of #mainScreen have another flex arrangement, but vertically. In Javascript I'm using $("#sidebar").toggle("slide", { direction: "left" }, 1000); when you click the menu button and it nearly works but I just want to eliminate the jumpiness. Does any know how to fix this, or if there are any alternative approaches I haven't thought of?
Its actually float creating problem, Its better restructure your HTML if Possible something like this.
<body>
<div class="main-content>
<div class="left-section">
<div id="sidebar>
<!-- stuff -->
</div>
</div>
<div class="right-section">
<div id="mainScreen">
<div id="headerCont"><!-- stuff --></div>
<div id="messageCont"><!-- stuff --></div>
<div id="chatInputCont"><!-- stuff --></div>
</div>
</div>
</div>
</body>
Now remove float and use flex on .main-content.
css
.left-section {
position: absolute;
top: 0;
bottom: 0;
left: -100%;
}
.left-section.slide {
left: 0;
}
.main-content.slide {
margin-left: 188px; // left-sidebar width
}
function sidebarClick(){
$(".left-section, .main-content").toggleClass("slide");
}
I am trying to make just the pages on my website that have the main body content class of ".interior-health-main" have a footer that is static at the bottom of the page. I want it at the absolute bottom, currently if you view some of my pages on a large screen, you will see a bunch of white space after the footer. I want to get rid of this.
I have been looking into this for hours now and tried many things, at first I was going to make the footer on the entire website static at the bottom of the page, but setting the footer's css to position: absolute conflicted with other elements on my home page, which is why I just want it on the ".interior-health-main." If it is possible to change it just for the footers on these pages please let me know, I do not really want examples of fixing this by setting the entire body to position:relative. It just messes up my homepage.
Here is an example of what it looks like with the white space after the footer http://codepen.io/aahmed2/full/KgWNYL/
<p class="nav">This is a Navigation Bar</p>
<div class="interior-health-main">
<div class="container">
<ol class="breadcrumb">
<li>Home</li>
<li>Health Resources</li>
<li class="active">Sample Short Page</li>
</ol>
<h2>Sample Short Page</h2>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Contact Us</h4>
<p>414 Hardin Hall<br> 3310 Holdredge St<br> Lincoln, NE 68583<br> (402) 472-7363</p>
<div class="affiliates">
<img class="wordmark" src="../_logos/wordmark.svg" alt="University of Nebraska-Lincoln Wordmark">
<img class="extension" src="../_logos/n-extension-rev.svg" alt="Nebraska Extension Logo">
</div>
</div>
<div class="col-sm-4">
<h4>Quick Links</h4>
<p>Human Health</p>
<div class="line"></div>
<p>Pet Diseases</p>
<div class="line"></div>
<p>Livestock Diseases</p>
<div class="line"></div>
<p>Events</p>
<div class="line"></div>
</div>
<div class="col-sm-4">
<h4>Attention</h4>
<p>All information on this site is intended for informational use only. Contact your doctor or veterinarian for health concerns.</p><br>
<h5><a class="partner" href="#">Partners & Stakeholders</a></h5>
</div>
</div>
<div class="copyright">
<div class="col-xs-9">
<h6>© 2016 Nebraska One Health. Site Map.</h6>
</div>
<div class="col-xs-3">
<img class="social pull-right" src="../_logos/twitter-logo-button.svg" alt="twitter icon">
<img class="social pull-right" src="../_logos/facebook-logo-button.svg" alt="facebook icon">
</div>
</div>
</div>
</div>
Here is my css
.nav {
text-align: center;
padding: 25px 0;
background-color: #c1c0be;
color: #fff;
position: fixed;
width: 100%;
z-index: 2;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 20px;
}
#media (max-width: 479px) {
.interior-health-main {
padding-top: 50px;
}
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
}
You can position the footer absolute like they did here
https://getbootstrap.com/examples/sticky-footer/
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* background-color: #f5f5f5; */
}
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
How did it conflict when you tried your way? update your post with what you did?
Please reference this question to find your solution.
I applied one of the solutions from the above link to your code.
Wrap your code in a #holder div.
Add the following CSS:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
height: 300px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 300px; /* height of footer */
}
Here is the working fiddle:
https://jsfiddle.net/DTcHh/25475/
I wrapped your page (not containing footer) into .page-wrap div, and edit you codePen code and just add this piece of code to your css
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height (with margin and border) */
margin-bottom: -299px ;
}
.page-wrap:after {
content: "";
display: block;
}
.footer, .page-wrap:after {
/* page-wrap after content must be the same height as footer */
height: 299px;
}
Demo
I am currently having an issue with parallax scrolling. I am using a custom JavaScript solution which moves the content over the initial background image. It works totally fine, however, the initial background photo is still visible underneath the content. Here are some code snippets.
#home {
position: relative;
width: 100vw;
height: auto;
}
#home_img {
min-width: 100vw;
width: 100vw;
height:auto;
position: relative;
z-index: -1;
}
#content {
position: relative;
z-index: 1;
}
And here is my html
<section class="section"id="home">
<img id="home_img"src="images/homepagenew2.png">
<!-- <i class="fa fa-home"></i> -->
</section> <!-- End Home Div -->
<div id="content">
.....
</div>
I want to stretch the height of my footer to 100% so it stretched its parent footer div to the end of the page. I tried this solution but it didn't work for me.
How can I stretch a div to 100% page height
Whenever I tried to set the height of my footer to 100%, it actually show the same size free area on the bottom of the page. I am using 960 Grid system CSS framework. if its not possible in CSS, can we do this in jquery or javascript?. check the demo of my page DEMO http://jsfiddle.net/23eED/1/ or
Here is my HTML code:
<div class="footer">
<div class="container_16">
<div class="grid_16">
<div class="footer-end-inner">
<div class="grid_6 alpha copyright">
<p>Copy right © <b>Mossawir</b></p>
</div>
<div class="grid_10 omega footernav">
<ul class="nav2">
<li>Home</li>
<li>Menu</li>
<li>Menu</li>
<li>Contact Me</li>
</ul>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
and here is my CSS code:
.footer{
height: 150px;
width: 100%;
background-color: #000615;
}
.footer-end-inner{
background-color: #162e4c;
height: 80px;
width: 960px;
}
.footer a{
color: #98999a;
}
.footer p{
color: #98999a;
padding-left:10px;
}
.copyright, .footernav{
margin-top:30px;
}
.footer a:hover {
color: #fff;
text-decoration: none;
}
You have to ensure that the body is not adding some space:
body { margin: 0; padding: 0; }
.footer { margin: 0; }
Also ensures the footer is taking up 100%.
make sure that its parent has set up fixed width like:
<div class="parent" width="300px">
<div class="footer">...</div>
</div>