Slideshow Above Header

[Kyle – SUPPORT]

Hi Ed

Is it possible to edit the files, using a child theme, so that I can place the slideshow above the header when a revolution slider alias is set in the page slideshow options?

– Kyle

[Kyle – SUPPORT]

I managed to do it, was really easy.

Sorry I should of attempted it first.

– Kyle

[Swift Ideas – Ed]

Glad you managed to do it Kyle, would you mind sharing your solution? Would love to get this added to the knowledgebase, and see it in action!

Thanks,

– Ed

[Kyle – SUPPORT]

Hi Ed

This was really simple I just cut the code for the slideshow and pasted it above the header (see below)

<!--// OPEN #container //-->
		<?php if ($page_layout == "fullwidth") { ?>
		<div id="container">
		<?php } else { ?>
		<div id="container" class="boxed-layout">
		<?php } ?>
			
            <!--// SLIDESHOW - moved above header //-->
            <?php if (is_page()) {
					global $post;
					$show_posts_slider = get_post_meta($post->ID, 'sf_posts_slider', true);
					$rev_slider_alias = get_post_meta($post->ID, 'sf_rev_slider_alias', true);
					$layerSlider_ID = get_post_meta($post->ID, 'sf_layerslider_id', true);
									
					if ($show_posts_slider) {
						sf_swift_slider();
					} else if ($rev_slider_alias != "") { ?>
						<div class="home-slider-wrap">
							<?php putRevSlider($rev_slider_alias); ?>
						</div>
				<?php } else if ($layerSlider_ID != "") { ?>
					<div class="home-slider-wrap">
						<?php echo do_shortcode('[layerslider id="'.$layerSlider_ID.'"]'); ?>
					</div>
				<?php }
					}
				?>
            
			<!--// HEADER //-->
			<div class="header-wrap<?php echo $header_wrap_class; ?>">
				
				<?php if ($enable_top_bar) { ?>
					<!--// TOP BAR //-->
					<?php echo sf_top_bar(); ?>
				<?php } ?>	
					
				<div id="header-section" class="<?php echo $header_layout; ?> <?php echo $logo_class; ?>">
					<?php echo sf_header($header_layout); ?>
				</div>

			</div>
			
			<!--// OPEN #main-container //-->
			<div id="main-container" class="clearfix">
				
            <!--// SLIDESHOW WAS HERE //-->
                
				<!--// OPEN .container //-->
				<div class="container">
								
					<!--// OPEN #page-wrap //-->
					<div id="page-wrap">

The only problem I had with this is the sticky header. The padding above the logo and navigation reduces from 15px to 10px when you start to scroll, because if the header was at the top of the page it would change to the sticky header, however I need the padding to stay at 15px until you scroll past the slideshow & header.

I have attached 3 screenshots below, the header before scroll, the header after scroll and then when it gets to the sticky header.

As you can see on the 2nd screenshot the padding above the menu and logo has been reduced.

– Kyle

[Swift Ideas – Ed]

Hi Kyle,

Try changing /js/functions.js lines 379-396 with:

			if (body.hasClass('mini-header-enabled') && stickyHeaderMobile) {
				header.stickyHeaderInit();
				$window.scroll(function() { 
					var scrollTop = $window.scrollTop(),
						stickyHeader = jQuery('.sticky-header'),
						headerHeight = jQuery('#header-section').height(),
						headerTop = jQuery('#header-section').offset().top;
					
					if (jQuery('#top-bar').length > 0) {
						headerHeight = headerHeight + jQuery('#top-bar').height();
					}
					
					if (scrollTop >= headerTop + headerHeight + 30) {
						stickyHeader.addClass('sticky-header-resized');
					} else if (stickyHeader.hasClass('sticky-header-resized')) {
						stickyHeader.removeClass('sticky-header-resized');
					}
				});	
			}

I’ve added this for the next update. It basically adds the header top offset to the resize calculation.

Hope that helps.

– Ed

[Kyle – SUPPORT]

Thanks Ed

I did solve it, however your solution is much simpler, I don’t now why I didn’t think to do it that way.

I did:

if (body.hasClass('mini-header-enabled') && stickyHeaderMobile) {
				header.stickyHeaderInit();
				$window.scroll(function() { 
					var scrollTop = $window.scrollTop(),
						stickyHeader = jQuery('.sticky-header'),
						headerHeight = jQuery('#header-section').height(),
						headerPrev = jQuery('#header-section').parent().prevAll(),
						headerOffset = 0;
					
					jQuery.each(headerPrev,function() {
						headerOffset += jQuery(this).height() + parseInt(jQuery(this).css('marginTop')) + parseInt(jQuery(this).css('marginBottom'));
					});
					
					if (jQuery('#top-bar').length > 0) {
						headerHeight = headerHeight + jQuery('#top-bar').height();
					}
					
					if (scrollTop >= headerOffset + 30) {
						stickyHeader.addClass('sticky-header-resized');
					} else if (stickyHeader.hasClass('sticky-header-resized')) {
						stickyHeader.removeClass('sticky-header-resized');
					}
				});	
			}

[Kyle – SUPPORT]

What is it that causes the header to resize? I want it to stick but not resize, how can I do this?

Kyle

[Swift Ideas – Ed]

It’s this part:

if (scrollTop >= headerTop + headerHeight + 30) {
	stickyHeader.addClass('sticky-header-resized');
} else if (stickyHeader.hasClass('sticky-header-resized')) {
	stickyHeader.removeClass('sticky-header-resized');
}

Just remove that and it won’t resize.

– Ed

[Kyle – SUPPORT]

Thanks for fast reply Ed

How do I save the functions.js in my child theme so that it overrides the parent?

-Kyle

[Swift Ideas – Ed]

You’d want to do something like this: http://wordpress.stackexchange.com/questions/65523/how-do-i-dequeue-a-parent-theme-css-file

Dequeue the parent theme file, then enqueue your version: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

– Ed