I am building a website for my upcoming wedding and I want a sticky header, but for some reason, it "disappears" by moving up after you go a certain way down the page. My test url is this: https://betterradiotech.com. Here is the nav markup:
<!-- Start Nav -->
<header>
<nav>
<ul class="nav-list">
<li>Home</li>
<li>Music</li>
<li>Gallery</li>
<li>Feed</li>
</ul>
</nav>
</header> <!--/ End Nav -->
Here is the nav SCSS:
header {
padding: 1em;
position: sticky;
top: 0;
z-index: 100;
width: 100%;
background-color: $burgandy;
}
.nav-list {
display: flex;
flex-flow: row nowrap;
li {
list-style-type: none;
margin-left: 10px;
}
a {
color: $pink;
font-weight: 600;
}
}
.active-nav {color: $navy !important;}
There is no JavaScript in making the nav, except for making the active nav work...for completeness sake, I will include that as well:
switch(location.pathname) {
case "/":
document.querySelector("a[title*='Home']").classList.add("active-nav");
break;
case "/admin/":
document.querySelector("a[title*='Admin']").classList.add("active-nav");
break;
case "/feed/":
document.querySelector("a[title*='Feed']").classList.add("active-nav");
break;
case "/gallery/":
document.querySelector("a[title*='Gallery']").classList.add("active-nav");
break;
case "/music/":
document.querySelector("a[title*='Music']").classList.add("active-nav");
break;
}
Why is my nav bar disappearing after a certain distance down the page? It seems to happen right before the end of the full background picture in the first section.
The reason for this is probably that your containing element is not as tall as you think, and you may have to set that element's height to fit-content explicitly, because sticky elements cannot leave their parent!
In most situations, the simplest solution will be to add this rule to your CSS:
body {
height: fit-content;
}
But generally, which solution you need and which element you have to apply it to depends on your document structure. Let's say it looks something like this:
<body>
<header>
<nav>
<!-- Your navigation -->
</nav>
</header>
<main>
<!-- The main content of the site -->
</main>
</body>
And you probably use some CSS reset that contains a rule like this one:
html, body {
height: 100%;
}
This allows using percentage heights on your page, but it will break sticky headers without additional work.
When you look at the size of the body with the dev tools, everything may look alright:
But once you scroll down, you see a problem:
The body is just as tall as your viewport. All other content you see is just overflowing out of it. But a sticky header can't do that, it will stay within the body and disappear with it. We now have three potential solutions:
If you don't need percentage-based heights on your page, you can use this CSS rule:
body {
height: fit-content;
}
If there are some percentage-base heights, try replacing them with vh instead, and see if that works for you. Then you can apply the fix from above.
If you do need percentage-based heights, then you might want to make the body stay in place but scroll the overflowing content through it:
html {
overflow: hidden;
}
body {
overflow: scroll;
}
I think you'll get the desired behavior by switching from sticky to fixed. Sticky is sort of a hybrid of fixed and relative positioning, and changes its behavior relative to context, and is commonly used to allow items to respond to its neighbors via scroll position.
Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.
So you want:
header {
position: fixed;
}
PS: The reason its disappearing for you is that your body has a computed height, but the contents of the body overflow beyond that height. The sticky element scrolls away once you scroll past the computed height of the body, which is the header's parent.
The previous soultions did not work for my situation.
position: fixed made the other elements hide beneath it. And adding margin top or top to them messed the header a little bit. After almost two days of banging my head against the wall, I ended up adding this css to my modal in my styles.scss:
.modal-class{
display: initial;
}
This worked for me, hopefully helps save someone else's time.
Related
This is how the footer is looking only on the Contact Page of the client's website.
If you notice the footer is not sticking to the bottom of the page and hiding the submit button.
I have tried below CSS but then it sticks and is always visible with scroll, like sticky nav. If I remove the fixed position it again leaves the bottom and hides the submit button.
.footerclass {
background-color: #eeeeee;
position: fixed;
top: auto;
bottom: 0;
width: 100%;
display: inline-block;
}
It is only happening on one page i.e. Contact Us page. I am using "Contact 7 form" using elementor.
How can I fix this? So that it always remains on the bottom of the page for all pages no matter how big the form becomes.
Add position: relative to your main container (from what I can see that's your .site class), as well as min-height: 100vh. This will allow you to set the footers position to absolute, relative to the main container.
It will always be at the bottom of the content, but not stick when scrolling. Using the min-height will also ensure that even if there isn't enough content to scroll, the footer will still be at the bottom of the page.
The problem is with style
#media (min-width: 768px){
.elementor-section.elementor-section-height-full {
height: 100vh;
}
}
Easiest hack would be to add this to your custom css, but with height "auto".
Screenshot from inspector, where it is:
The issue is not with footer, but with content overflowing behind this because of fixed height.
Here is a sample where I take the affix for the right sidebar (unfortunately, Bootstrap 4 hasn't true affixes) - Violy Theme Right Sidebar Sample
I see that sticky behavior made by this style:
.sidebar {
border-radius: 20px;
padding: 25px 25px;
position: sticky;
position: -webkit-sticky;
top: 0;
}
So, when I duplicate sticky behavior in CSS for my page here - nothing happened, right sidebar scrolled with text :-(
What's wrong?
Guess, written text is not enough to provide a clear answer, so, please look into browser Developer Tools for these pages to inspect styles and elements.
That can happen for many reasons: Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element.
In fact, in your site I found that its parent element:
<header id="head_page">...</header>
<section class="wrapper>
<!--- here we find the sidebar -->
</section>
<footer id="footer>...<footer>
has a overflow: hidden; property and when I disabled it the property of position: sticky; started working again.
UPDATE: Please see #despotes quick fix, that preserves the use of sticky positioning on the page.
I will leave my fixed positioning solution as a reference for future users.
Using fixed positioning that is more evenly supported:
CSS
.sidebar {
position:fixed;
top:425px;
}
jQuery
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() > XX) { //value to be determined
$('.sidebar').css('top','25';
}
if ($(document).scrollTop() < XX) { // same value but add 1
$('.sidebar').css('top','425';
}
});
});
So basically once the user scrolls past XX, the sidebar will sit 25px below the top of the screen and when under XX it will sit at 425px from the top. Could be edited with more trigger points for smoother effect.
I'm using Bootstrap Cover Template to make a clean website with few content: basically some text and an image.
Header and footer overlaying the website content as you can see in this screenshot:
Website: merdanacabeca.com/adrenalina/
What is the best solution in this case?
Media-query?
I know that I can add top-margin to the content <div> and change footer's position to static instead of fixed. However, this leads to other problems in different screen resolutions (smaller for example).
I'm looking for the best approach.
The problem derives from the fixed position of .masthead & .mastfoot classes.
Try removing the fixed position of .mastfoot and the following for .masthead and .cover :
.masthead {
position: fixed;
top: 0;
background: #333333;
}
.cover {
padding: 0 20px;
margin-top: 115px;
}
if i've understood your question correctly, you're trying to stop the footer with text "Desenvolvido por ..." from overlaying that white button (correct me if not).
well it's because of the padding-bottom of the .inner class that the text stands there. you can reduce that...
also i don't think that you need position: fixed for footer. cause usually it stay at the bottom of the page.
you can also assign margin-top to the <div class="inner cover"> to make the problem with the header go away
I can't seem to get the footer on my page to stay at the bottom and have it continually pushed down when ever I want to add more content. Now I know that this question has been asked about a million times, and I have read through many tutorials and watched several videos on the subject.
However, I just can't seem to make it work. I don't know what I'm doing wrong. The footer appears to only stay in one place. I know that to someone here, you're going to find an obvious mistake that is easily fixed. However, I'm not a professional web designer by any means. In fact, this is not my job at all. But I always like to learn how to do things, and my site looks amazing (At least to me). I just can't, for the life of me, figure out what's wrong with this one problem.
Should I start by pasting the entire coding for my page?
Check out this fiddle, hopefully I didn't misunderstand your question. The JS in there can be ignored, only the CSS and HTML are relevant.
I've seen a lot of people asking this question, and I had it too at one point, so I figured I'd post a comprehensive answer here :) Anyway, explanation:
The HTML:
<div class="wrapper">
<button id="add-content">Add more content</button>
<ul class="content">
<li>I am content, destroyer of worlds</li>
<li>I am content, destroyer of worlds</li>
<li>I am content, destroyer of worlds</li>
<li>I am content, destroyer of worlds</li>
<li>I am content, destroyer of worlds</li>
</ul>
<footer>
Footer!
</footer>
</div>
And the CSS:
body,
html {
padding: 0;
margin: 0;
height: 100%;
}
.wrapper {
min-height: 100%;
position: relative;
box-sizing: border-box;
padding-bottom: 100px;
}
footer {
height: 100px;
background: rgba(0, 0, 0, 0.2);
position: absolute;
width: 100%;
bottom: 0;
}
So, the content & footer have a wrapper around them, because that's how most people roll, but it's not required and you can actually do this using just the body as the wrapper.
Now, key points to note:
html, body has a height: 100%: The height of a block element is, by default, determined by it's content. So, even if you try to position the footer at the bottom, using position: absolute; bottom: 0, it's actually getting pushed to the bottom of the first non-static parent element, or if there are no non-static parent elements, the bottom of the html/body element. By setting height: 100%, we can force the body, html elements to take up the entire available viewport and ignore content height. (You can also use min-height: 100%;, but it depends on which browsers you want to support)
.wrapper has a min-height: 100%: Between the sticky element and the element you want to sticky the footer to, you want to make sure all elements have 100% height, otherwise they'll collapse to match the height of the content.
.wrapper has box-sizing: border-box; padding-bottom: 100px;: The padding at the bottom is to make sure that if content gets added to the wrapper, it doesn't end up getting lost behind the sticky footer. This padding should match the footer height, or be greater.
footer has position: absolute; bottom: 0;: No explanation needed here, I'm guessing. The next point is actually more important.
.wrapper has position: relative: Remember what I said about non-static parents? By making .wrapper non-static, we make sure that footer stays inside .wrapper, while remaining sticky.
I think that covers it, but I'd recommend playing around with the relevant HTML/CSS in the fiddle to get a clear understanding of what's going on and how the elements interact.
P.S.: While going through your fiddle, I noticed there's a .wrapper class, but no element? I'd recommend adding that to the fiddle(and removing footer content), it'll be easier to track down what's missing :)
P.P.S.: Check out this fiddle branched from yours, I've made the following modifications after removing all unnecessary HTML content:
Added .wrapper element around all the body content, except the footer.
Added .push element at the bottom of the .wrapper element
Removed a bunch of unnecessary CSS styles from the footer, changed positioning to relative.
I would start with:
.myStyle{
position:absolute;
bottom:0;
}
If you want the footer to always be visible on the page (even when you scroll) you need to use: position:fixed;
Haa the famous sticky footer problem. I think we all once passed by their.
If you do as it says there > http://ryanfait.com/sticky-footer/ You'll manage to do one proper.
The other solution is to have a position:fixed; bottom:0px; see this fiddle but this will mean your footer will be always display over content. It will be position relatively to your window and not to your page.
I'm trying to make a sticky footer, but it's not quite working for me.
CODE: http://jsfiddle.net/PC8x7/1/
As you can see in the live view, the footer comes underneath the rest of the page but you have to scroll to get there. How can I avoid this, and only have it have a scroll bar when it needs to?
you have to get rid of the margins in the main containers and headers
see the note about heights and margins http://www.cssstickyfooter.com/using-sticky-footer-code.html
Your wrapper has min-height: 100%; and your footer is placed underneath the wrapper. The wrapper is 100% of the height of the page and the footer is put right underneath the page forcing the scroll.
There's a couple ways you can get around the issue. You can try putting the footer inside the wrapper, setting wrapper's position to relative, and absolute positioning the footer to the bottom.
css:
.wrapper {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
}
.footer-link {
text-align: center;
}
html:
<div class="wrapper">
...
<div class="footer">
<div class="footerlink">
<p><span>© Domain.tld</span> | </p>
</div>
</div>
</div>
As i understand - you want to put footer on the bottom of the window ?
method A. - make it position: fixed
method B. - play around with wrapper height 100%, overflow and border-box
http://www.quirksmode.org/css/box.html . You can put footer over wrapper padding this way
method C. - Javascript