Sticky and scrollable Sidebar sidebar - CSS and HTML - html

I am working on a Shopify Store but I would like to make a this sidebar sticky and scrollable. The reaso to be scrollable is that when using the position: sticky; css callout the sidebar appears to be very big so it is not visible until the end of the page, then at that moment I would love to make it scrollable so we can filter without having to go to the bottom of the page. I have found something like overflow-y: scroll; but does not work together with the sticky thing. I am sharing some example pics: IMAGE HERE 1 IMAGE HERE 2

You might need to add max-height property to the sticky element
like so
.side-nav{
position: sticky;
overflow-y: scroll;
max-height: 100vh;
}
now your sidenav has a max-height of the height of your screen, so it can apply the scroll behavior if the content is larger than the container

Related

footer is not sticking to the ground

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.

Scrolling Menu When Vertically Overflows

I'm attempting to make this hamburger menu (visible when the page width is less than 865px) scroll to show whatever overflows the VH on screens not tall enough to display the whole menu at once. From my understanding by setting a fixed height to the dropdown section itself, something like calc(100vh - *header-strip-height*) combined with overflow-y: scroll; applied to #header_menus should work, however, because the #header_menus div is a child element of the top strip, and the top strip has a defined height, setting overflow-y: scroll; seems to force the dropdown segment to only take up the VH of the strip menu, and scrolls within the confines of the strip menu, instead of taking up the entire right side of the site, of all the solutions I've tried, I have yet to arrive at something that does not interfere with the placement of the body relative to the header, which is represented in the codepen by a placekitten image.
Looking for suggestions on how to allow the dropdown hamburger menu to scroll when it vertically overflows, without breaking the header layout in a way that interferes with the body in any way, ideas?
https://codepen.io/roomwillow/pen/BaWQoVJ
The issue caused by the fixed height set on your navigation.
In order to handle this you can set an absolute position on the menu,
when the viewport is under 865px.
As such:
#header_menus {
background-color: black;
padding-right: 1rem;
padding-left: 2rem;
overflow: auto;
position: absolute;
height: calc(100vh - 5.5rem);
top: 5.5rem;
right: 0;
}
Do make sure to add relative to the parent so it doesn't mess up the page:
#header_right_section {
position: relative;
}
This will make it work.
https://jsfiddle.net/5zjw1b6h/

Mat Table with sticky header and Horizontal ,vertical scroll bar

I have a mat table with sticky header and the vertical scroll of the page. It works fine until I add more columns dynamically and the horizontal scroll bar appears.
The sticky headers stop working.
is there any way to make it work?
Please see the example:
https://stackblitz.com/edit/angular-hdg9xh
You can set the width and height to the div container wrap around the mat-table. On stylesheet, you can apply something like this:
.example-container {
width: 100%;
height: calc(100vh - 32px);
overflow: auto;
}
Example: https://stackblitz.com/edit/angular-hdg9xh-uxkaeh

Sticky Footer with fixed navbar

I have a problem regarding a sticky footer with a fixed header. I followed some of the solutions that seem to fit to what I wanted to achieve like (http://ryanfait.com/sticky-footer/) or (http://css-tricks.com/snippets/css/sticky-footer/) and (A true sticky footer with a fixed header?) but there are still somethings that I would like to solve.
Here is my JSFiddle
Footer on the bottom of the page with tiny content or a lot of it - Check!
No content underneath the header thanks to #siteContents:before (creates a spacer with the same height as the header) - Check!
Scroll bar still present with tiny content - Uncheck!
Footer in the bottom of the page when inside the div (siteContents) I have something like this - Uncheck!
(...)
<div id="siteContents" class="clearfix">
<div itemscope="itemscope" itemtype="http://www.datavocabulary.org/Something/">.. </div>
</div>
(...)
Can the itemscope div be the responsible for this behavior?
It seems to be because when the page is loading and the height to place the footer is calculated by the browser it places the footer on the bottom of what he knows. The content inside the itemscope div (forms, tables,..) overflows over the missplaced footer.
What can I do to keep the sticky footer at the bottom in this case?
I would suggest using min-height and position: absolute; for that kind of layout. So your container will be displayed with at least 100% height:
.wrapper {
position: relative;
min-height: 100%;
}
Your sticky footer will need position: absolute; and bottom: 0; so that the element always stays at the bottom of its parent element (.wrapper):
.page-foot {
position: absolute;
bottom: 0;
}
Your header will be the same, but with position: fixed;. Since you don't want your header and footer to overlap your content you need to set both padding-top and padding-bottom. You could use javascript to set padding-top/padding-bottom, if you don't want to use a fixed padding. As far as I know there is no CSS-only way to achieve the same effect.
Here's a simple demo.

Vertical navigation that stretches entire page

I need a vertical navigation that will stretch the entire screen. How can I do this?
Typically, I would set the navigation with:
position: absolute;
height: 100%;
overflow-y: hidden;
but I can't get this to work for me for some reason or another. It shows a scroll bar regardless, and doesn't stretch the entire page--only the height of one viewport. You can view a working example here:
http://solstaging.net/vhosts/dealer-world-delivery/
Add position: relative to your body tag and the #primary will be the full height.