Fixed Sidebar with separate scroll-bar

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 :)

Wow. More power (and love) to GP.

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

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 :)

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

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! :)

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

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

Thanks a lot Leo & Tom!
Super helpful.

No problem :)