So im using Adminlte with a fixed layout. The thing is I only wanted the sidebar fixed and not the header. So I removed the position: fixed from the main header.
The problem - when scrolling down there is a gap (the size of header) at the top of the sidebar.
I tried this at first :
.fixed .main-sidebar{
padding-top:0;
}
But the problem is if you don't scroll past the heading completely the sidebar jumps under it.
So now I added a function in js to calculate the position and add padding accordingly. Its kinda working but its laggy and probably a bad solution.
$(window).scroll(function () {
var positionNow = $(window).scrollTop();
if (positionNow < 50){
$('.fixed .main-sidebar').css({"padding-top" : 50 - positionNow});
} else {
$('.fixed .main-sidebar').css({"padding-top" : "0"});
$('.main-sidebar').css({"padding-top" : "0"});
}
});
Is there a better way to make the sidebar jump to top?
I realized that the gap is showing because the class main-sidebar includes the logo at top. But making the class .sidebar fixed weirdly doesn't affect sidebar-collapse.
There are two very simple way to achieve this
Remove fixed class from body(Note: It will make sidebar scrollable) or
Add css property position: absolute in main-header class
.main-header {
position: absolute !important;
}
or you can simply add "fixed" to your body on main.php
<body class="hold-transition skin-blue sidebar-mini fixed">
Related
I am trying to create a simple off-canvas "push" menu. When the menu trigger is clicked, the menu slides in from the right of the viewport and pushes the main content divs offset by the width of the menu.
The jQuery works (in that is pushes the menu onto the page, and pushes the content off the page) but the animations do not work as expected. There is some "catchup" where the menu moves slower than the main content areas.
I set a transition-delay to fix this issue but it doesn't seem to have had the effect I thought it would.
How do I managed to get the content divs to move offscreen so that it looks like they are pushed by the menu?
Here is an example of my issue: http://codepen.io/anon/pen/GrKJor
Here is my code:
$('.nav-trigger').click(function(){
$('nav').addClass('nav--open');
$('header').addClass('content--pushed');
$('main').addClass('content--pushed');
$('footer').addClass('content--pushed');
});
And here is the CSS for the transition:
nav {
...
right: -300px;
transition: right 0.2s ease-in;
}
.nav--open {
right: 0px;
}
.content--pushed {
position: relative;
right: 300px;
}
The issue is you're attempting to animate a property - specifically, right position - in a way that will only work in your markup structure if the element being animated has a position:fixed.
You can see the desired behavior in this forked CodePen:
http://codepen.io/anon/pen/ygBNXG
(I also added a 'nav-close' button so you can see the inverse & test repeatedly)
By applying a fixed position to the header, main & footer, the transition effect can indeed be animated:
header, main, footer {
position: fixed;
/* other CSS */
}
To account for the fixed position, I've then offset the top position of main & footer based on your defined heights:
main {
top:100px
}
footer {
top:200px
}
Finally, and this is only preference, I made the left position of header, main & footer be what changes (from 0 to -300px) as that seems to more accurately reflect what's happening, which is those elements are being moved off the left edge of the viewport by 300px.
Update
If you don't want to use position:fixed on the elements, you need to modify your markup structure to wrap the header, main & footer elements and place the nav element outside of said wrapper. This is working sans fixed position and heights/offsets here:
http://codepen.io/anon/pen/qREvEB
The revised markup is essentially:
<div class="wrapper">
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
<nav>...</nav>
In this scenario, the positions of the header, main & footer can be reset to relative and the content is all scrollable as needed.
Currently on my single page site when you click on the Bootstrap navbar menu items it takes you to the section of the page with that div #ID. However, naturally because the top of the navbar lines up with the top of the new section my content is overlapped by the width of the navbar (80px or 50px when collapsed).
Screenshot of issue:
"Ready to book" heading is actually centered in the middle of that div but overlapped by 80px of navbar.
Screenshot showing top of page:
The issue is that I do not wish for the navbar to overlap the content in the section I have linked to. Put in other words, I would like the top of bottom of the navbar to line up with the top of the new section div.
Surely this can be handled using some JS to offset the navbar up by the height of the the navbar?
I have had a suggestion to use CSS to add padding into the top of section but this adds an extra 80px of padding that I don't want, when normally scrolling the page.
Okay so I found two solution to this finally using JS and CSS
here.
My preference is for this CSS solution:
#id:before {
display: block;
content: " ";
margin-top: -80px;
height: 80px;
visibility: hidden;
}
Obviously, replace ID with the ID of the anchor.
The actual JS snippet solution:
var shiftWindow = function() { scrollBy(0, -50) };
window.addEventListener("hashchange", shiftWindow);
function load() { if (window.location.hash) shiftWindow(); }
However, it is still a bit clunky as you can actually see the the browser scroll to the anchor point and then back up by the scrollBy offset amount of 80px.
I am not sure if this problem has been solved yet, but I had the same problem and adding the appropriate heading worked (by appropriate padding I mean the height of your navbar element).
For example:
#id { padding:50px }
I'm trying to add a off canvas menu into my site and the one I picked was the mmenu(http://mmenu.frebsite.nl/index.php). Everything else other then my footer works. I have a sticky footer in the site and every time the menu is clicked open the footer flys out of position.
For a fixed footer, add the class mm-fixed-bottom:
id="footer" class="mm-fixed-bottom">Goodbye<
Example: http://jsfiddle.net/1eddy87/Lx5ps/1/
I have tried the documented way which says you should use "mm-fixed-bottom" for any fixed elements, however that didn't do the trick.
Documentation: http://mmenu.frebsite.nl/tutorial.php
scroll to the bottom of the page and then open the menu via the header and you will see the footer move out of position.
any ideas??
I realize that I am using absolute, and not fixed. Its a requirement for the sticky footer(http://mystrd.at/modern-clean-css-sticky-footer/). I tried to fix my way through hoping that the mm-fixed-bottom would work, however it didn't. I need a fix for using the absolute.
You've got position:absolute on the footer when it's supposed to be fixed. You're also overwriting the CSS from mm-fixed-bottom. I thought the whole reason for a sticky footer is for it to stay at the bottom of the screen and not move.
I removed all positioning and it worked.
http://jsfiddle.net/Lx5ps/3/
Solution found:
On further inspection, looks like the library changes <div class="mm-page"> to height:100% which screws with height:auto. I toggled it off in browser inspector and it works.
Changed this:
html.mm-opened .mm-page {
height: auto;
overflow: hidden;
position: absolute;
}
http://jsfiddle.net/Lx5ps/4/
Just been having the same problem but I came up with using css calc.
html.mm-opened .mm-page {
height: -webkit-calc(100% - 320px);
height: -moz-calc(100% - 320px);
height: calc(100% - 320px);}
320px being the height of the footer. Calc is pretty well supported. See calc browser support
I am editing a Squarespace template and would like to create a sticky navigation sidebar.
There's a Squarespace field where I can enter "Custom CSS."
I already have the sidebar, but how do I modify the CSS to make it stick? I want it to remain visible when I scroll below the fold.
My pageBodyWrapper div is centered (auto/auto) and contains both the contentWrapper div and the sidebar1Wrapper div, on the right.
I have tried
#sidebar1Wrapper
{
position:fixed;
}
with either a left or right value in px or %, but whenever I change window size, the sidebar is either going away from the content or overlaps with it.
How do I prevent this from happening?
Can I define my fixed position relative to the contentWrapper div?
Thank you for your help!
Here's the site I am talking about: Last Wave Film.
Unfortunately that functionality is not yet built into css. It is done with javascript. Essentially the javascript detects when the page has scrolled to the top of and then sets the sidebar to position: fixed.
Here's a solution that uses the jQuery library: http://css-tricks.com/persistent-headers/
You can make the sidebar fixed using css and it will be permanently fixed within the browser window.
.sidebar1Wrapper {
position: fixed;
top: 20px;
right: 40px;
}
I am using some javascript to calculate the height of the page and then set a min-height on on a div. The reason for this is to push the footer to the bottom of the page for pages that are short on content. My issue is the min-height is about 30-40 px to big thus causing scroll bars. (Note: I am not using a solution like sticky footer for various reasons and prefer this solution.)
Here is my code:
JS
$(function() {
var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight() );
$("#page-content").css("min-height",height+"px");
});
HTML
<header class="container">
<div id="menu" class="row">
<!-- Content -->
</div>
</header>
<div id="page-content">
<!-- Content -->
</div>
<footer>
<!-- Content -->
</footer>
I believe the issue lies in my CSS. For example I have a margin in the header as so:
#menu{
margin: 5px auto 10px;
}
If I remove that code it will reduce the scrollbar just a little bit. (I have other margins set in place on the page so changing just this one will not work as a solution).
How would I re-write the JS code to factor in the margin for the header and other sections?
The <header> box's height doesn't reflect the child #menu's margins because they are both normal box elements, and if the #page-content had margins, they would overlap the #menu's margins, in which case the header's height would include some part of the content's height, which wouldn't make sense.
The issue is collapsing margins: http://www.w3.org/TR/css3-box/#collapsing-margins
As that page explains, you can get tell the browser not to collapse margins a few ways:
add display: inline-block; to your #menu { } rules (my first suggestion)
add overflow: hidden; to your header { } (a potentially better suggestion if you're having alignment issues)
make your <header> absolutely positioned, or float it. Or do that to the #menu inside.
Or if you want to go for a hack, you could calculate the header height manually:
var header_height = $("header").outerHeight() +
parseInt($("header").children().css('margin-top'), 10) +
parseInt($("header").children().css('margin-bottom'), 10);
Now that I think about it, this makes sense, and I think the css spec is doing the right thing.
Updated: http://jsfiddle.net/HzBSz/2/
Also see: Outer element margin not equal to inner element margin
For some reason the JS is not calculating the margins. I added the margins I had in the header and footer and they totaled 45px. Thus the script now looks like so:
$(function() {
var height = $(window).height() - ($("header").outerHeight() +
$("footer").outerHeight() + 45 );
$("#page-content").css("min-height",height+"px");
});
I add 45px and the script now functions correctly.
Why not just place the footer on the bottom manually? I mean, I know you said you prefer not to, but why? If you want it to always be there, do
position:relative;
bottom:0;
If you want it to scroll with the rest of the page (as it sounds like you may), use
position:absolute;
instead.
This is a much better method than dynamically inserting dummy content to push a footer down.
Perhaps you look at this
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
may solve your problem.
Try .outerHeight(true) for all your elements instead of .height() or .outerHeight():
$(function() {
var height = $(window).outerHeight(true) - ($("header").outerHeight(true) + $("footer").outerHeight(true) );
$("#page-content").css("min-height",height+"px");
});
.height() - returns the height of element excludes padding, border and margin.
.innerHeight() - returns the height of element includes padding but excludes border and margin.
.outerHeight() - returns the height of the div including border but excludes margin.
.outerHeight(true) - returns the height of the div including margin.