Archived topic
Create a custom sidebar
8 replies · Started by Anton on October 25, 2019
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
Hi there,
Can you add the sidebar in first?
Then I'll try some CSS :)
Hello Leo,
Thank you for the quick reply. I have added a sidebar now with a post plugin. :-)
All the best
Best regards,
Anton
Hi there,
Give this a shot:
@media (min-width: 769px) {
#right-sidebar {
position: absolute;
right: 0;
width: 300px;
}
}Let me know :)
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
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
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.
Thank all! This is all that I needed.
Great support!
You're welcome
