Docs

[chris_chaffin]

Could you please take a look at my front page and let me know why the top section scrolls up after a few seconds. I am baffled.

Chris

friendlyave.org

[chris_chaffin]

This reply has been marked as private.

[Rad]

Hi Chris,

Thanks for writing in.

How do I reproduce the issue? I can’t replicate the scroll issue after few seconds. Maybe I’m doing it differently, would you mind providing a video recording?

Thanks!

[chris_chaffin]

It seems to only happen on Safari

Here is a video of it…https://www.youtube.com/watch?v=Q0dnQuhpQFE

[Rad]

Hi there,

AH, it doesn’t scroll. The background of the slider just shifted while it’s loading.

Since it’s loading the height of the masthead changes on safari and that causes it to shift. Please add this CSS to Admin > Appearance > Customizer > Custom > CSS?

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto !important;
}

Thanks!

[chris_chaffin]

Tried that, but no dice

[chris_chaffin]

I had to remove it so the problem wouldn’t make the church site look amateurish. Let me know what I can do in its place. Just need a parallax bg with text in the front. Would prefer not to use slides since they load after the page does, since we use AWS to pull our media.

[Friech]

Hi There,

Because that requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

Then navigate to Appearance > Sidebars, create a new custom sidebar and take note of its ID.

Then on your child theme navigate to this directory \x-child\framework\views\icon\ in there create a file named wp-header.php, and paste the code below on it.

<?php

// =============================================================================
// VIEWS/ICON/WP-HEADER.PHP
// -----------------------------------------------------------------------------
// Header output for Icon.
// =============================================================================

?>

<?php x_get_view( 'global', '_header' ); ?>
<?php if(is_front_page() and is_active_sidebar( 'YOUR CUSTOM SIDEBAR ID' )): ?>
  <?php dynamic_sidebar( 'YOUR CUSTOM SIDEBAR ID' ); ?>
<?php endif; ?>
  <?php x_get_view( 'global', '_slider-above' ); ?>

  <header class="<?php x_masthead_class(); ?>" role="banner">
    <?php x_get_view( 'global', '_topbar' ); ?>
    <?php x_get_view( 'global', '_navbar' ); ?>
    <?php x_get_view( 'icon', '_breadcrumbs' ); ?>
  </header>

  <?php x_get_view( 'global', '_slider-below' ); ?>

Replace the string YOUR CUSTOM SIDEBAR ID with the ID of the sidebar you just created.

Navigate to Appearance > Widget, you will see your custom sidebar there for you to add a Text widget. You can use the shortcode below as the template for your banner.

[cs_section id="topbanner" bg_image="YOUR IMAGE URL HERE" parallax="true" class="custom-banner"][cs_row inner_container="false" marginless_columns="false"][cs_column fade="false" fade_animation="in" fade_animation_offset="45px" fade_duration="750" type="1/1"][x_custom_headline level="h2" looks_like="h3" accent="false" class="cs-ta-center mvl"]Custom Headline[/x_custom_headline][/cs_column][/cs_row][/cs_section]

Replace the YOUR IMAGE URL HERE string with your actual image URL.

Thats it your custom banner should show on your home page.

The current slider on your home page looks good though.

Let us know how it goes.

Cheers!

[Author]

Posts