Lodestar Theme – Customizing Parallax Scrolling

  • Unknown's avatar
    sandyalves29 · Member ·

    Hello,
    I’m not sure if this is the right place to get help?
    I am trying to customize the height of the parallax scrolling window. I am using the Lodestar theme. I have tried both of these as customized css strings without success:
    .parallax {
    height: 500px;
    }

    .parallax {
    height: 50%;
    }

    My site is located at lunesolairewines.net

  • kokkieh · Staff ·

    Hi there,

    The forum for the self-hosted version of Lodestar that you’re using can be found at https://wordpress.org/support/theme/lodestar/, but as it’s one of the theme we make we can help you here.

    I assume you’re speaking of the section on the front page where your site title and logo appears, correct? You can use this:

    /* Customize height of front page featured image */
.lodestar-front-page .custom-header-image {
  height: calc( 100vh - 200px );
}
/* Re-center site logo and title */
.custom-header-image {
  padding-top: 13%
}

    In the first bit of code, adjust the px value to what you want it to be – this theme doesn’t use a fixed height for that section, but calculates it according to the height of the screen or browser window being used to view your site. If you prefer a fixed height you can just replace the calc value with that, though.

    Adjusting the height of that section will cause the site title to not be centered any more, though, but you can adjust the padding value until that looks right again.

  • Unknown's avatar
    sandyalves29 · Member ·

    Kokkieh,
    This worked perfectly! Thank you so much for your help. I had been trying to figure this out for days. I appreciate you and I am full of gratitude that people like you are here to help.

    Thank you for making my day!
    Sandy

  • The topic ‘Lodestar Theme – Customizing Parallax Scrolling’ is closed to new replies.