[Resolved] Fixed Sidebar with separate scroll-bar

Home Forums Support Fixed Sidebar with separate scroll-bar

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1474432
    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 πŸ™‚

    #1474846
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1475182
    Muhammad Jawad

    Wow. More power (and love) to GP.

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

    #1475322
    Leo
    Staff
    Customer 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 πŸ™‚

    #1475792
    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

    #1476962
    Tom
    Lead Developer
    Lead Developer

    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! πŸ™‚

    #1477076
    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

    #1477125
    Leo
    Staff
    Customer Support
    #1477202
    Muhammad Jawad

    Thanks a lot Leo & Tom!
    Super helpful.

    #1477205
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.