Sticky Transparency

[wardsdesign]

I have a table on this page that I applied the sticky feature. But I would like the background to opaque and NOT transparent. So the it has a white background. The code is:

<table class="bg-white table table-hover" data-plugin-sticky data-plugin-options="{'minWidth': 991, 'containerSelector': '.container', 'padding': {'top': 110}}">
		
        	<thead>
            	<tr>
                    <th style="width:135px"></th>
                    <th style="width:60px"><br>Item Code</th>
                    <th style="width:105px"><br>
                    Description</th>
                    <th style="width:105px">Outside Dimensions <br>(LxWxH)</th>
                    <th style="width:50px">Fluid Ounce <br>Capacity</th>
                    <th style="width:20px">Case <br>Count</th>
                    <th style="width:70px"><br>Matching Lids</th>
                </tr>
            </thead>
		               
				<tr>
                  <td colspan="7"></td>
                </tr>
                  </table>

I tried writing css to make this happen, but so far no luck.

/* Product List Top Section */
.prodtop {
	background-color: #FFFFFF !important;
	opacity:1;
}
	
html .bg-color-white,
html .bg-white {
	background-color: #FFFFFF !important;
	opacity:1;
}

Could you give me some guidance. Thanks as always.

---

• This topic was modified 1 week, 5 days ago by Support.

[Support]

Hello, please try this:

.pin-wrapper .table {
    background: #FFF !important;
    z-index: 9999 !important;
    margin-top: -22px;
}

Our Support Center is here to help all the buyers with questions related to the template, but not customization to the buyers needs. Please consider that for the next questions.

Kind Regards.

---

[wardsdesign]

That works great. Thank you.

One more detail. We use a lot of lightbox popup features on this page. For example when you click on the product images.

https://www.gosolut.com/new_product_buttons2.html

Can we make the Sub-menu sticky effect fade like the sticky Header does, when the lightbox is active? Right now it looks odd to see the Sub-menu when it should focus on the lightbox.

---

[Support]

Hi, looks like the problem is related to z-index, so you can set the lightbox z-index to:

.mfp-wrap {
    z-index: 1000000 !important;
}

Kind Regards.

---

[wardsdesign]

That works. Thanks for the quick reply!

---

[wardsdesign]

Not sure what happened, but now the fix is NOT working. I added the code to my custom.css file.

The page location is now:

https://www.gosolut.com/products.html

---

[Support]

Hello, I just tested it and it’s working, can you send more details?

Thanks.

---

[wardsdesign]

This reply has been marked as private.

[Author]

Posts