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;
}
Related
I am currently using the fullpage.js plugin for my website, I created a slide in navigation bar and I am now placing the pancake to open it on the first section of fullpage. I am trying to position it in the top left corner of the page, but I can't figure out how. Here is the code. Thanks in advance for your help.
<div class="section"><span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span><h2 class="animated fadeInDown">GTX 1080</h2></div>
edit: here is all of my code: https://anotepad.com/notes/pjccfy
Image
You give me very little code to go by, but I'm assuming you want a similar navigation as on the fullPage.js demo page.
Using CSS:
.section {
position: fixed;
top: 0;
left: 0;
}
As I said, I have very little to go by so I don't even know if .section is the correct class to apply this positioning to. Would be great if you could provide a complete page. If you want the element to have some spacing between the browser borders, you can increase the values for top and left to say, 20px.
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
html:
<div class="div_fixed"></div>
<div class="other_content">
content goes here
</div>
css:
.div_fixed{
position:fixed;
height:40px;
}
.other_content{
height:200px;
}
The div_fixed will remain fixed at the top position of the page.
But as the page scrolls up, the content of the div other_content will vanish just at the lower edge of the div div_fixed .
In the case of scrolling down the invisible content of other_content will begin to be visible from the lower edge of the div_fixed
How to achieve that ?
EDIT: no scroll bar should appear for any div
Use overflow: hidden to get rid of scrollbars
Is this what you're looking for? http://jsfiddle.net/BCRPa/
I've taken your HTML/CSS and added a bit on a jsFiddle - I think in order to achieve the effect you're looking for, you just need to make your content actually tall enough to be scrollable. At 200px high and one line of text, nothing is going to scroll.
So I made your other_content div taller, and then added a top: 0 to your .div_fixed selector, to keep it stuck to the top of the screen, and a margin-top: 40px to the .other_content div in order to have it start below the floating div.
If you want it to be a navbar-type thing, you can of course add a width: 100% to the .div_fixed.
All of this should transfer into a container div (with position: relative) fairly easily as well if you want, although you may have to re-position the fixed div.