[Resolved] Fixed Sidebar with separate scroll-bar

[Muhammad Jawad]

Hi There –

I have just purchased GP and loving it so far for its simplicity and light-weight. I want to add a side-bar similar to the blog here: https://seths.blog/.

The side-bar should have its own scroll bar independent of the site main scrollbar on the right side. Both the scroll bars can be used independently to move the side-bar content and site main body(posts) content respectively. Also note that the left side bars sticks there in case go several pages down the main body (posts).

Can you please help? Thanks in advance.

For reference, I also have elementor pro installed in case I can achieve this combing GP’s powers with Elementor’s powers 🙂

[Leo]

Hi there,

Are you already using the header on your site?

If so we can just implement this method:
http://gpsites.co/sider/

Let me know 🙂

[Muhammad Jawad]

Wow. More power (and love) to GP.

PS. You won the first impression. Loved the support.

[Leo]

Sorry which theme version are you using?

We just released 3.0 with Flex version and currently updating the CSS 🙂

Will you be importing Sider? If so I’d recommend waiting a few hours until we reupload the site with flex version 🙂

[Muhammad Jawad]

Hi Leo!

I was using the previous version but I can update to 3.0 now because not much of the content is there at this moment and I am playing around with different functions and features anyways.

I have a few tiny follow-ups queries though (regarding my main help need/question above):

a. What is the difference between the sidebars of your ‘Navigator’ and ‘Sider’ themes? Are both implemented in a similar fashion at the back-end?

b. If both are different, can I use any of these methods (Sider and Navigator) in any other GP Theme?

c. How can I make a black separator sort of vertical line towards the right side of left-sidebar as in here: https://seths.blog/

c. How can I change the width of these sidebars in Navigator or Sider?

e. I want to make the posts on the right side to appear on cards with shadow effect. Like in typical blogs these days and also in your ‘Marketer’ theme. How can I do that in any other theme?

f. How can I make any of the widgets on the sidebar stick and scroll down with the page instead of making whole sidebar stick (like in Sider and Navigator). E.g. I want to make any of the three widgets on right-sidebar of your Marketer theme stick around as I scroll down the site.

Thanks a lot in advance for your support. I wanted to make sure I cover all aspects at once before I finalize and start working on a theme for my blog.

-Jawad

[Tom]

Hi there,

a) Both are set up using similar custom CSS found in Customize > Additional CSS.

b) Absolutely – the CSS simply moves the site header to the left by using position: fixed.

c) Something like this:

.site-header {
    border-right: 1px solid black;
}

e) This requires some super simply CSS, something like:

.separate-containers .inside-article {
    box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}

f) You can use position: sticky if you target the widgets, or you can use a plugin like this: https://wordpress.org/plugins/q2w3-fixed-widget/

Hope this helps! 🙂

[Muhammad Jawad]

Hi Tom –

All good qnd thank you very much. Just one little point is missed/overlooked because I just noticed there were two ‘point c’s in my post (my bad).

c. How can I change the width of these sidebars in Navigator or Sider?

Best.
Jawad

[Leo]

Try changing the width property in the CSS:
https://www.screencast.com/t/i97Gldd2Rj

[Muhammad Jawad]

Thanks a lot Leo & Tom!
Super helpful.

[Leo]

No problem 🙂

[Author]

Posts