[Resolved] Create a custom sidebar

Home Forums Support Create a custom sidebar

  • This topic has 8 replies, 4 voices, and was last updated 11 months ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1044573
    Anton

    Good evening,

    I am happy with the design of my website, but I want to add a sidebar – without moving anything. Currently the width of the container is 800px. Everything fits perfectly in the middle of the screen and with my post picture. Perfect size.

    When I try to add a sidebar, it shoves my contet/article to the side or eats up the width. I have tried playing with the container layout, the width of container, sidebar width and everything else I could find. But since the standard sidebar is connected to the main content, it always affects the whole layout of my page.

    In the URL I sent you, you can see that I have floating social share buttons on the left. I basically want to add a sidebar at that location, but on the right side – without changing the position and width of my articles. I hope that makes sense.

    Do you have any idea how I could make this happen? I fully understand if this is out of your scope and if so, would you mind pointing me in the right direction to where I should look or who I should talk to?

    Thanks in advance.

    Best regards,
    Anton

    #1044588
    Leo
    Staff
    Customer Support

    Hi there,

    Can you add the sidebar in first?

    Then I’ll try some CSS 🙂

    #1046196
    Anton

    Hello Leo,

    Thank you for the quick reply. I have added a sidebar now with a post plugin. 🙂

    All the best

    Best regards,
    Anton

    #1046336
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this a shot:

    @media (min-width: 769px) {
        #right-sidebar {
            position: absolute;
            right: 0;
            width: 300px;
        }
    }

    Let me know 🙂

    #1046429
    Anton

    Hi Tom,

    Cheers. It moved the sidebar to the right. But the article contet is still squeezed together because of the sidebar. I tried increasing the width of the page, but it shoved the content to the left side of the screen.

    Right now I have just added the CSS, and you can see that the sidebar still affects what the contet looks like.

    I want the article to be central, with 800px width. While having a sidebar where you put it now. 🙂

    Thanks again.

    Anton

    #1046432
    Anton

    I did some more changes with the width and sidebar width, now it looks pretty alright. 🙂

    If I may be annoying and just ask one more thing: Is it possible to make the sidebar go all the way up? So that it’s next to my article picture?

    A massive thanks for the quick help!

    Anton

    #1046559
    David
    Staff
    Customer Support

    Within the CSS Tom provided after the width: property add: top: 0; you may need to tweak it eg. top: 40px; to help with vertical alignment.

    #1046592
    Anton

    Thank all! This is all that I needed.

    Great support!

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