[harrysumner]

Hi, I have been using the theme for a few months and I am a big fan. While viewing the website on laptops and computer monitors, I want to make the left side bar area (Including logo area and menus) stay in a fixed position when scrolling up and down. Do you have any css tips to help me achieve this please?

Thanks

https://www.sonospace.org/

[bkkumaris4u]

Recently, I was pleased to discover that all major desktop browsers (Chrome, Firefox, Edge and Safari) are now compatible with the CSS property: sticky. (Apart from an error in Chrome with some elements of the table). Edge was the last browser to send support in October 2017 in version 16, which can be found at caniuse.com. This means that we can build a sticky sidebar using only two lines of CSS, without JavaScript. Let me show you how.

First set up two divs. One represents the content of the main page and should extend beyond the bottom of the screen. The second will be the sidebar, which we will shorten compared to the length of the screen, so that we can see it clearly move in our example. We use flex to place them next to each other, because it is in 2018 and also because I love flex.

Use the following HTML and CSS code:

<div class = “wrapper”>
<div class = “main”>
Main content
</ div>
<div class = “sidebar”>
Sticky side bar
</ div>
</ div>
wrapping {
screen: bending;
justify content: intermediate space;
}

.principal,
. sidebar {
edge: black 3px;
Filling: 15px;
background color: #fff;
}

.principal {
width: 60%;
height: 150vh;
}

. sidebar {
width: 25%;
height: 25vh;
}

body {
background color: #ccc;
Font family: sans-serif;
Upholstery: 10px;
}

[harrysumner]

Thanks 🙂

[Theme Horse Support Team]

Hi there,

For to fixed the position sidebar when scrolling up and down. It needs code customization, you need to hire a developer as this is a new feature to add in the theme.

Thank you!

[Rufando]

Another solution is to install WP Sticky Sidebar plugin

[Author]

Posts