Home › Forums › Porto – Responsive HTML5 Template › Sticky Transparency
- This topic has 7 replies, 2 voices, and was last updated 2 days, 18 hours ago by
wardsdesign. This post has been viewed 75 times
-
AuthorPosts
-
January 14, 2023 at 7:24 am #10042647
wardsdesign
ParticipantI 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.
January 16, 2023 at 11:44 am #10042653Support
KeymasterHello, 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.
January 21, 2023 at 3:16 am #10042680wardsdesign
ParticipantThat 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.
January 21, 2023 at 3:22 am #10042681Support
KeymasterHi, 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.
January 21, 2023 at 3:37 am #10042682wardsdesign
ParticipantThat works. Thanks for the quick reply!
January 26, 2023 at 3:50 am #10042696wardsdesign
ParticipantNot 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
January 26, 2023 at 5:07 am #10042699Support
KeymasterHello, I just tested it and it’s working, can you send more details?
Thanks.
January 26, 2023 at 5:20 am #10042701wardsdesign
ParticipantThis reply has been marked as private. -
This topic was modified 1 week, 5 days ago by
-
AuthorPosts