Side Bar Logo

An update: I tried using the Left Sidebar in Widgets adding the code (see below). Then in the customizer I changed the sidebar layout settings to Sidebar / Content. For some reason the sidebar ends up at the bottom of the page and the content pushed left (as if there is a missing sidebar on the right!).

Is this the right way to do it? Any ideas?

My working site:
https://ux0.088.myftpupload.com/

FYI... I originally built my site on DIVI (mostly with code on top of their templates) but was sooooo slow so I am switching to GeneratePress. To get an idea of what it is supposed to look like here is my site:

HERE IS THE SIDEBAR CODE (FYI I tookk out the < > because the code was generating on here):

div class="desktop-logo-row"
div class="desk-divwithin"
img src="" alt="logo link to homepage" width="150" height="170" /
/div
/div
<style>
@media screen and (max-width: 980px){
.desktop-logo-row{
display:none !important;
}
}

.desktop-logo-tester{
opacity: 1;
}

.desktop-logo-tester:hover{
opacity: 0.5;
}
@media screen and (min-width: 980px){
.desktop-logo-row{
margin-top: 182px!important;
margin-left: 110px!important;
width: 200px;
}}

@media screen and (min-width: 980px){
.desk-divwithin{
margin: -35px 0 0 -35px;

}
}
</style>

Hi there,

Are you using a child theme? The sidebar issue is caused by an altered HTML structure.

You can see the original structure vs. your structure:
https://www.screencast.com/t/JxGonUjPd

You'll need to change it back in order to make the sidebar work properly.

For the fixed logo question, I don't think a sidebar is needed, try this CSS for desktop, feel free to change the numbers to find the most suited position:

@media (min-width: 769px) {
    .site-logo {
        position: fixed;
        top: 10%;
        left: 20%;
    }
}

Let me know if you need further assistance :)

Thanks for your reply. I figured out a solution using the sidebar widget using this code:

@media (min-width: 980px) {
.content-area {
margin-left: 300px;
}
@media (min-width: 980px){
.inside-left-sidebar {
position: fixed;
left: 0;
top: 0;
width: 300px;
z-index: -10;
height: 100%;
overflow: auto;
overflow-x: hidden;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
transition: .1s ease;
}

}
}

HOWEVER This pushed page content too far to the left... it looked as though it thought there were 2 side bars. So I added this code in my child theme:
.site-content .content-area {
width: auto;}

This all worked but it feels pretty hacky to me. Maybe I'll try your solution too to see the difference.

Yes I am using a child theme since I add lots of customizations. I like using a child theme. You said change it back? What do you mean... remove the child theme?

You said change it back? What do you mean… remove the child theme?

No, that's not what I meant. You can certainly keep using the child theme.

I don't know how you altered the HTML of the page template (as you can see in the screenshot in my previous reply), but in order to make the sidebar work properly the easiest way is to change the HTML structure related to the sidebar back to default.

It seems you've figured out a solution with CSS already, let me know if you need more help :)

Ok good.

I added HTML to the Side Bar Widget. Will my hard coding slow the site down?

My assumption is that GeneratePress out of the box generates the header using PHP and compiles the HTML properly... and that any hard coding would mess with this optimized process and slow the site down... am I wrong? Or is adding HTML in ok?

Hi there,

I added HTML to the Side Bar Widget. Will my hard coding slow the site down?

My assumption is that GeneratePress out of the box generates the header using PHP and compiles the HTML properly… and that any hard coding would mess with this optimized process and slow the site down… am I wrong? Or is adding HTML in ok?

Adding HTML should be OK. It shouldn't slow down the site, assuming the image on the HTML you've added is properly sized, appropriate to its purpose. :D

Thanks!

No problem. :)