Archived topic
Line between content and sidebar
18 replies · Started by steven on December 1, 2021
I wish to have a thin line between the content and the sidebar
Hi there,
try adding this CSS:
@media(min-width: 769px) {
.content-area {
border-right: 2px solid #ccc;
}
}
Thank you it's working ! :)
it's possible to have the same line for separate main menu
up
Try this one:
.site-header {
border-bottom: 2px solid #ccc;
}
If it doesn't work, try this:
.main-navigation {
border-bottom: 2px solid #ccc;
}
If still doesn't work, please link us to your site.
Hi David, do you know how i can keep this line online in above the fold.
thank you it's working :)
Glad to hear that :)
do you know how i can keep the line between content and sidebar only in above the fold. ?
tricky as Above the Fold is variable to the screen size, and Borders have to run the length of the element they are applied to.
Can you share a link so i can see what you currently have setup ?
Hi David,
Actually, I don't really need it to be exactly above the fold. it can exceed. I just don't want the line to go to the footer .
can it be a code and I can adjust?
You can try this CSS:
@media(min-width: 769px) {
.content-area:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 300px;
background-color: #f00;
}
}
you can adjust the top right width height etc to suit your needs.
Hi David thanks to help me.
The line appears to the far right of the sidebar instead of being between the content and the sidebar
Can you share a link to your site so i can see the layout.
yes