Okay
  Public Ticket #3563776
Sticky Background
Closed

Comments

  •  8
    chrisvandermeer9 started the conversation

    Hey there, I was wondering if its possible to have a sticky background on a row so that the user can scroll through content with the background staying static?

  •  1,919
    Judith replied

    Hi there,

    Thanks for writing to us.

    We don't have this option with the row background, however, we can provide css for it.

    In the meantime, please don't hesitate to reach out with further questions. We're happy to help.


  •  8
    chrisvandermeer9 replied

    Hey Judith, if you're able to provide CSS that would be amazing. Also I feel its a good one for the next update!

  •  1,919
    Judith replied

    Hi there,

    Thanks for writing back.

    Sure, we'll have it on our wishlist for the coming updates.

    Please share your website URL so that we may provide CSS that suits your site.

    I look forward to your response. 

  •  8
    chrisvandermeer9 replied

    Hi Judith, 

    The website is a friends I am assisting with. 

    https://kintarianamaru.com

    Do you need the pages? If so, I believe she wants a sticky background on the Blog, Podcast and potentially one other. 

    The site is PW protected but the PW is: "KA" if that helps.

    Sincerely, 

    Chris

  •  1,919
    Judith replied

    Hi Chris,

    Thanks for writing back.

    Please share the link to the blog page.

    I look forward to your response. 

  •  8
  •  1,919
    Judith replied

    Hi there,

    Just to clarify, does the user want the sticky background image on the entire page or on the header section background?

    I look forward to your response.

  •  8
    chrisvandermeer9 replied

    Hey Judith, as far as I know its just the background to the actual blog element. So a single row. 

  •  1,919
    Judith replied

    Hi there,

    Thanks for writing back.

    Is it possible for you to share a screenshot for a better understanding?

    I look forward to your response.

  •  8
    chrisvandermeer9 replied

    Hey Judith, sorry for any confusion. 

    If possible I just want the ability to add a sticky background to a single row, in this instance the row has the blog on it. So the idea would be that as the user scrolls down through the blog articles the background stays static. 

    Hope that helps.

    Attached files:  Screenshot 2024-01-17 232429.png

  •  1,919
    Judith replied

    Hi there,

    Thanks for writing back and clarifying.

    You can first add the row background so that we can provide css for a fixed background.

    I look forward to your response.

  •  8
    chrisvandermeer9 replied

    Thanks Judith, I have added an image background now. 

    https://kintarianamaru.com/golden-soul-blog/

  •  1,919
    Judith replied

    Hello Chris,

    Thanks for writing back.

    To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:

    From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:

    .page-id-299 #page-header-bg .page-header-bg-image-wrap, .full-width-section .row-bg, .wpb_row .row-bg {
        position: fixed;
    }

    Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related

    If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help. 


  •  8
    chrisvandermeer9 replied

    Hey Judith, thank you! 
    The effect is exactly what I'm after but I only want to apply it to one row. I have given the row I want the effect on the custom Row ID: "blogbackground" 

    Is that possible?

  •  1,919
    Judith replied

    Hi Chris,

    Thanks for writing back.

    Please add this css instead :

    .row-bg.viewport-desktop.using-image {
        background: fixed;
    }

    I hope you find this helpful.

    If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help. 

  •  8
    chrisvandermeer9 replied

    Hi Judith, that appears to have worked. Thank you!

    Is it possible to get code to remove the logo/business title from the header for a single landing page? 

    I have a landing page here I am trying to make as a fullscreen landing page with one colour for all of the background, but I want to remove the business title from the header only for that page.

    https://kintarianamaru.com/home-test/

  •  1,919
    Judith replied

    Hi there,

    Thanks for writing back.

    You can use this CSS :

    .page-id-839 body #header-outer[data-format=centered-logo-between-menu] #top #logo {
        display: none;
    }

    I hope you find this helpful.

    If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help. 


  •  8
    chrisvandermeer9 replied

    Thank you Judith, that is great. It doesn't appear to have worked but perhaps it will take some time. 
    Can you see if they can inspect the page?

    https://kintarianamaru.com/home-test/

  •  8,938
    Tahir replied

    Hey Again,

    Use this revised CSS and check.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .page-id-839 #header-outer[data-format=centered-logo-between-menu] #top #logo {
        display: none !important;
    }

    Thanks


    ThemeNectar Support Team 

  •  8
    chrisvandermeer9 replied

    Hey Tahir, thanks for that. I added the code to the Salient settings instead of directly to the page CSS and it has worked. At the moment I'm remaking that page, if I change the page name later to replace the existing home page will the CSS still be valid?

  •  8,938
    Tahir replied

    As if you rename it only and not create a new page. You can also add the below CSS to the Custom CSS box in the Page Builder so that it applies to that page only: 

    #header-outer[data-format=centered-logo-between-menu] #top #logo {
        display: none !important;
    }
    

    Thanks 


    ThemeNectar Support Team 

  •  8
    chrisvandermeer9 replied

    Legend, thanks so much mate.