Sticky Sidebar not sticking at a certain window size

[BMconnect]

Hi,

I’m having a problem with the sticky sidebar. I can’t provide link, but the code I have is exactly the same as it is on the theme’s default page (page-sticky-sidebar.html) and the problem exists there as well.

Basically the sticky sidebar will not stick when the window size is between 992px – 1007px. Above 1008px it sticks, and below that the layout switches so the sidebar is displayed with full page width above content.

Here is code for sidebar taken from page-sticky-sidebar.html

<aside class="sidebar" id="sidebar" data-plugin-sticky data-plugin-options="{'minWidth': 991, 'containerSelector': '.container', 'padding': {'top': 110}}">
								<h5 class="font-weight-semi-bold">Categories</h5>
								<ul class="nav nav-list flex-column mb-5">
									<li class="nav-item"><a href="#first">First</a></li>
									<li class="nav-item">
										<a href="#second">Second</a>
										<ul>
											<li class="nav-item"><a href="#sub-second-1">Sub Second 1</a></li>
											<li class="nav-item"><a href="#sub-second-2">Sub Second 2</a></li>
										</ul>
									</li>
									<li class="nav-item"><a href="#third">Third</a></li>
								</ul>

							</aside>

---

[Support]

Hello,

First thanks for your purchase.

Sorry but unfortunately we couldn’t reproduce this issue here. The sticky is active in these screen size range:

You mentioned that can’t provide a link. In this case, please send the entire HTML code of the page. So we can try to reproduce here.

Kind Regards,

Rodrigo.

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[BMconnect]

This reply has been marked as private.

[Support]

Hello, thanks for the files.

But unfortunately we still couldn’t reproduce the issue. Here’s a test with the files you send with Chrome Browser at Windows 10:

I saw in your files, that you are using a MacOS system, then I think: “Maybe it’s a safari issue only”. Here’s a test with macOS and Safari:

As you can see we couldn’t reproduce on macOS too.

The best way now, is you public your local files into a online server, so we can check if this problem will remain.

OBS: Check if the zoom of your browser is with 100%.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Support]

Hello,

UPDATE:

We were able to reproduce the issue now by not using the Chrome Developer Tools to change the screen size. By only resizing the browser without dev tools.

We will work in a solution, and reply for you here as soon possible.

Thanks for you patience.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Support]

Helllo,

Solution:

In the js/theme.js file, locate the jquery.pin plugin and change like the red marked below:

* Change $window.width() to $window.outerWidth().
* This will also consider the 17px value from the browser scroll bar.

We hope this helps!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[BMconnect]

That worked!

Thanks for your help and quick response.

---

[Support]

Hello,

Great the issue is now resolved!

If you need further assistance, feel free to contact us.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts