How to fix navbar and sides columns so that they do not scroll

General
1

Hi,

I’d like to know if there’s any way to fix the navbar and the sides columns ?

I’ve got a 2/8/2 layout with columns on each side. I would like to scroll the center content, but not the left and right columns.

I also would like the navbar to be sticky and always visible for users.

Can you tell me how to do this ?

Thanx

2

Hi @Lovegiver. Stick navbar add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content, further explanation see link below:

Sticky Navbar

And Bootstrap Affix might be the solution for the side columns

3

Hi Rob and thanx for your quick answer.

I’ve tried what you told me, but the result is not satisfying.

There were 2 things :

  1. fix the nav bar in order to remain it accessible by the users without scrolling
  2. fix the side bars in order to maintain actions menu accessible instead of having empty spaces
  1. The nav bar

What you told is working but I need to set the nav bar at the very top of the page. The nice picture and the banner above still continue moving.I tried to couple the banner and Nav bar in the same div to solidarize them, but the banner is not fixed.

  1. Bootstrap Affix

That doesn’t work at all. The left and right side bars are columns in a row, but checking the Affix control doesn’t fix them at all.

Is there any settings I should do to make the Affix option works ?

4

@Lovegiver just saw your reply just now. Its late here but I’ll try mock up something tomorrow and have a look at it. Hope that’s okay.

5

Hi Rob, do not be stresses for me. I’m glad you help me and that’s enough ^^
I hope my knowledges in CSS matters will increase quickly and I’m sure the problem is me, not the product…
Javascript is still not my cup of tea and that’s a bad thing when working on website. Much better in Java !!

6

Hi I thought I’d posted this a couple of days ago!

Hi @Lovegiver. Just letting you know I haven’t forgotten about you… it’s proving to be a bit more challenging than I’d thought!

7

@Lovegiver, sorry for taking so long this took more effort than I expected! Here’s where I’m at with this and hopefully it will do what you require. It seems that Affix is being dropped for Bootstrap 4 and at the moment they are recommending using the HTML5 sticky property with the use of a polyfill to get it working properly in as many browsers as possible. So with this in mind I downloaded this sticky polyfill and went to work and the result can be view here and you can download a zip file containing the demo I’ve created so you can pick through it and apply it to your own project from here.

Hope this helps you achieve what you’re after. One thing to remember is that the element that has sticky will remain fixed in it position for as long as the element containing it is on the screen, e.g. if the sticky element fills its row it won’t stick!

1 Like
8

Hi Rob

thanx for all you’ve done. That’s exactly what I was looking for : fixed navbar & sticky side columns.

I gonna study your files to understand how to integrate them in my own project.

But tell me : what about the roadmap of PG ? Will you quicly integrate this workaround in PG or is this just an exclusive gift for me ? :wink:

Have a nice day.

9

In the “feature request” topic, I asked for sticky columns to be added in future version of the product !

10

@Lovegiver This is not a Pinegrow issue it is more about Browser support and HTML5. I think the work around is to just have these on file and just add these to projects when needed. Hope the files make sense to you, if you’re stuck just reply here and I’ll try to help out.

11

Nice work Rob! That looks like a useful layout for a blog, having previous articles linked in the side columns

1 Like