Add Background Colour to Sidebar menu in Simple theme

[Ideagen_la]

I want to add a static solid colour background to the sidebar in Simple theme. 

@starlightstitch seems to have found a way to do it but is keeping it a secret?

[ErSanjay]

@Ideagen_la  can you share your store url i can share the code .

as per you point the question based on that here is code  goto online store -> theme -> select active theme action (edit code ) asset/theme.scss  add below code end of the file

.main-content
{
 background-image: url("backgroun-img.png");/ * replace image url */
 background-color: #cccccc;
}

[Ideagen_la]

Hi @ErSanjay, does this preview work?

I tried your code, but that changed the background of a bunch of things but not the sidebar, how can I tweak it to specify the sidebar background, not the overall background?

[ErSanjay]

you have to change the class on  .main-content  to your-side-bar-class then it works only for the left  side bar

.your-side-bar-class
{
 background-image: url("backgroun-img.png");/ * replace image url */
 background-color: #cccccc;
}

[Ideagen_la]

Thanks for elaborating. I have been trying to identify the correct side-bar-class, but nothing I've tried so far worked.

I tried inspecting html, and found this following line:

"<div id="shopify-section-sidebar" class="shopify-section"><div data-section-id="sidebar" data-section-type="sidebar-section">"

but even from those sidebar names, I couldn't find any combination that worked. 

Would you be able to deduce how to reference my sidebar class properly in Simple Theme? Or straight from my website here?

[ErSanjay]

here is the code for the left sidebar background 

#shopify-section-sidebar
{
 background-image: url("backgroun-img.png");/ * replace image url */
 background-color: antiquewhite !important;
}

[Ideagen_la]

Thank you for replying again! I've tried that, but it does not work. Neither the background image (I just got a random placeholder off Google to test) nor the color (nor a hex code like #131313) worked. 

Could it be a transparency issue?

[soyebamd]

Hi,

I checked there is some css display property issue.

Please add this to your CSS code

#shopify-section-sidebar{
    display: inline-block;
    float: left;
}

After it you can change background of sidebar as you want!

Here is result how it look after apply this css.

Let me know if it works or any issue?

Thanks

[Ideagen_la]

Hey Soyebamd,

Thanks for taking a crack at this as well!

So that does work, however, that reverts the sticky sidebar that I janked in from another thread. That code being

#shopify-section-sidebar{
    z-index: 9999999;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

Ideally, I would like to have both features: sticky sidebar and a background image. Is that possible?