Responsive and Fixed Sidebar Design using CSS and HTML

Currently, I am in the process of setting up a Shopify Store and one thing that I would like to achieve is making the sidebar sticky and scrollable. The problem I encountered with using the position: sticky; css property is that it causes the sidebar to appear too large, only becoming visible at the end of the page. My goal is to have the sidebar be constantly accessible for filtering without having to scroll all the way down. I attempted to use overflow-y: scroll; but unfortunately, it does not work in conjunction with the sticky positioning. As reference, here are some example images: IMAGE HERE 1 IMAGE HERE 2

Answer №1

To make the sticky element work properly, you must include the max-height property in your CSS code like this

.side-nav{
  position: sticky;
  overflow-y: scroll;
  max-height: 100vh;
}

By setting the max-height to 100vh, your side navigation will have a maximum height equal to the height of your screen. This allows for scrolling if the content exceeds the container size.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Use vanilla JavaScript to toggle an element's visibility only once by comparing data attributes with data-get

I am struggling with some issues regarding toggling. When I click on the button, it toggles only once and I can't seem to hide the element either! It should work in a way that when I click on the first button, it shows the element and clicking again s ...

Can the Apache tomcat located at "localhost:8080/app.html" be accessed from a different network?

Currently, I am hosting my webpage on a Tomcat server. While I can easily access it from different computers on the same network, I am curious if there is any way to access this webpage/localhost from a different network? ...

Selenium is unable to activate the button element by clicking

I have been using Selenium with Python and attempting to click a button, but it simply isn't working. Here is the relevant HTML: <div class="nmMym"> <button class="sqdOP yWX7d _8A5w5 " type="button"> ...

Reasons behind the lack of proper styling in my p-calendar from PrimeNG

Currently deep diving into Angular for a project and I decided to incorporate the <p-calendar> component from primeng. After installing the necessary packages, the versions were: "primeicons": "^2.0.0", "primeng": "^5.2.7", Initially everything was ...

remove the text inside a div when the browser window is resized

I am trying to arrange three divs on my website <div class="col-md-4"> Some content #1 </div> <div class="col-md-1></div> <div class="col-md-6"> Some content #2 </div> The first div (col-md-4) contains a g ...

Using Angular-Translate to Replace Variables in Title Tags

In my AngularJS project, I am using Angular-Translate version 2.6.1. One of the challenges I am facing is how to include a variable in a translated title attribute within a span element. <span title={{'translationID'|translate:'{username ...

Determining with jQuery if the right element has been successfully "dropped"

Imagine having 10 different draggable boxes and 2 droppable areas. You need to correctly match 5 boxes with droppable area 1 and the other 5 with droppable area 2. If a box intended for droppable area 1 is mistakenly dropped into area 2, it should not wor ...

Validating textfields and dropdowns for dynamic HTML identifiers using jQuery

I am attempting to validate a dropdown and text field together. Both fields can either be left empty or both must be filled. The HTML ids are generated dynamically. I have tried the code below but it is not working as expected. Here are the resources I use ...

Validation of default values in contact forms

Obtained a free contact form online and hoping it works flawlessly, but struggling with validation for fields like "Full Name" in JS and PHP. Here is the HTML code: <input type="text" name="contactname" id="contactname" class="required" role="inpu ...

Implement a cross-browser solution for setting the input width to adjust automatically based on the text content

Is there a way to create a text input box that automatically adjusts its width in all browsers, including IE6 and newer? In the example below, the textbox expands to fit the content "text." Are there any cross-browser solutions for this issue? See demo on ...

Problems with adjusting image sizes on different devices

img { width: 100%; height: auto; } The above code adjusts the width of the images to match the width of the page, while maintaining the original aspect ratio with the height. However, if we were to use the following: img { width: auto; h ...

Tips for styling a UL list with LIs on separate lines using CSS

As depicted in the image below, the list is extending beyond the screen. I am trying to limit the width of the ul element but it is still exceeding the specified width. Current CSS being utilized: .menu ul{ width:100%; max-width:100%; } ...

Determine the total number of active links on an HTML webpage using F#

Currently, I am working on developing a basic F# function that will be able to count the total number of links present in a given HTML website URL. I understand that this can potentially be achieved by counting the occurrences of the "<a" substrings, b ...

Step-by-step guide on aligning a div of unknown height in the center of a div with a set

Struggling to center product images vertically within a fixed height box? Here's the code I've been working with: <div class="main-pic"> <ul> <li><img src="images/extra/laptop.jpg"></li> <li><img ...

Instructions on how to properly align a Youtube video using the react-youtube package

I'm currently encountering an issue with my YouTube video display. I have managed to make it responsive, but it is stuck on the left side of the screen and I am unsure how to center it properly. I tried adjusting the padding, but it didn't work a ...

Creating a clickable navigation menu item with a clickable caret located on the same line

I've been developing a solution using Twitter Bootstrap to create a main navigation menu that expands upon hover on desktop, while the menu expands when clicking the caret on mobile (caret hidden on desktop). Additionally, I aimed to make the top-leve ...

Having trouble implementing table row selection with semantic-ui table

I am currently in the process of adopting Semantic-UI, but I am encountering some issues. Specifically, I am struggling to make row selection work in a table. Below is the sample HTML I am using from Semantic-UI: <table class="ui selectable celled tab ...

What steps can I take to stop the background image from zooming in modal view?

I noticed something strange happening when I open a modal after clicking on an image on my website. The background image seems to zoom in along with the modal, thanks to a new class called .modal-open added to the body element. This class includes addition ...

Sharing a component via a module does not connect HTML attributes within the Document Object Model

Currently, I am working on a portfolio Angular 8 app and decided to create my own lazy load module for specific components instead of using Angular's loadChildren for learning purposes. However, I am facing an issue with binding DOM attributes and dir ...

When the button is pressed, the chosen option vanishes

I'm encountering an issue with my file, template.php, that contains a JS function to add dropdown box options to a page. The problem arises when the user selects options in the dropdown boxes and then clicks the "addsunday" button to add more boxes. T ...