Add Background Colour to Sidebar menu in Simple theme

Highlighted
Excursionist
12 1 0

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?

 

0 Likes
Highlighted
Explorer
81 8 11

@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;
}

  

Highlighted
Excursionist
12 1 0

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?

0 Likes
Highlighted
Explorer
81 8 11

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;
}

  

Highlighted
Excursionist
12 1 0

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?
0 Likes
Highlighted
Explorer
81 8 11

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;
}

  

Highlighted
Excursionist
12 1 0

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?

0 Likes
Highlighted
Excursionist
11 0 4

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.

soyebamd_0-1604844094379.png

 

Let me know if it works or any issue?

Thanks

Highlighted
Excursionist
12 1 0

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? 

0 Likes