Sticky Transparency

Home Forums Porto – Responsive HTML5 Template Sticky Transparency

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #10042647
    wardsdesign
    Participant

    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.
    #10042653
    Support
    Keymaster

    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.


    #10042680
    wardsdesign
    Participant

    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.


    #10042681
    Support
    Keymaster

    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.


    #10042682
    wardsdesign
    Participant

    That works. Thanks for the quick reply!


    #10042696
    wardsdesign
    Participant

    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


    #10042699
    Support
    Keymaster

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

    Thanks.


    #10042701
    wardsdesign
    Participant
    This reply has been marked as private.
Viewing 8 posts - 1 through 8 (of 8 total)