[Resolved] Create a custom sidebar

[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

[Leo]

Hi there,

Can you add the sidebar in first?

Then I’ll try some CSS 🙂

[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

[Tom]

Hi there,

Give this a shot:

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

Let me know 🙂

[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

[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

[David]

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.

[Anton]

Thank all! This is all that I needed.

Great support!

[David]

You’re welcome

[Author]

Posts