Support » Plugin: Slideshow » Slideshow as header is blocking the menu

  • Greetings All –

    I’ve been chasing this issue for a couple weeks with no success…

    I created a slideshow to use as my page’s header. It is identical in size to the static header I currently use and is, in fact, built from the exact same image. However, when I place the header into the php file it covers up the menu.

    I have received a LOT of good feedback here about z-index values and such, but NOTHING has worked. I’m sort of at a loss as to why it happens. If the menu is on top of the static image, then the z-index values should already be fine. BUT, delete the code for the static image and replace it with the code for the slideshow – and all heck breaks loose. There is nothing in the code for the static image that appears to alter z-index settings, so I cannot for the life of me figure out why changing the code forces this to happen.

    Any thoughts???

    lcoscal.org

    http://wordpress.org/plugins/slideshow-jquery-image-gallery/

Viewing 15 replies - 1 through 15 (of 19 total)
  • Moderator cubecolour

    (@numeeja)

    Can you link to a page that shows the slideshow doing this? All I can see is pages with a static header, so it isn’t possible to troubleshoot.

    Thread Starter andersonfmly

    (@andersonfmly)

    Thanks for the offer to assist/troubleshoot. I can create a dummy page within my site, but I’m not certain if inserting the “[slideshow_deploy id=’335′]” tag will allow you to properly troubleshoot, versus adding the “<?php do_action(‘slideshow_deploy’, ‘335’); ?>” php code to the style sheet. If you need the php code to troubleshoot I am not certain where I insert it to affect a single “dummy” page on my site. I am hesitant to put it in its intended location since it blocks the menu and renders the site very un-usable.

    Please let me know how you wish to proceed, and I’ll do my best to accommodate. I am a total novice at this and suspect it is probably a relatively simple fix.

    Moderator cubecolour

    (@numeeja)

    Adding PHP code to the stylesheet won’t work, so don’t do that. I really need to see the problem. If we look for a workaround to emulate the problem on a single page, it may not help to troubleshoot what is happening on the actual site.

    Troubleshooting without seeing the site is not easy as it is based on guesswork, but one thing has just struck me which *might* help
    is this line the code you are adding to your header PHP file to add the slideshow?

    <?php do_action('slideshow_deploy', '335'); ?>

    If so try adding a clearing div to it, either enclosing it:

    <div style="clear: both;"><?php do_action('slideshow_deploy', '335'); ?></div>

    or after:

    <?php do_action('slideshow_deploy', '335'); ?>
    <div style="clear: both;"></div>

    These probably won’t help, but might be worth a quick try.

    If that doesn’t help, perhaps you can set up a clone (or partial clone) of the site at a subdomain, in a folder or at another domain (maybe one of those crappy free hosts!) As long as it has the same theme & the slideshow plugin, and it replicates the issue you get on your site, you won’t need to import all of your data. Once I can see that, if there is any CSS you can add to your child theme’s stylesheet I expect I’ll be able to find it.

    Thread Starter andersonfmly

    (@andersonfmly)

    Okay… Given that you seem to be active now, I have gone ahead and plugged the slideshow into the header, exactly as I have been trying to do it up to this point – without any of the dividers you suggested above.

    I don’t expect much site traffic over the next couple hours. Thank you so much for taking a look.

    Moderator cubecolour

    (@numeeja)

    I can see the slideshow on your site so I’m looking at it now.

    Moderator cubecolour

    (@numeeja)

    OK the first thing I have notice is that the menu doesn’t seem to be hidden by the slideshow, but I can see it with a transparent background near the bottom of the page – which is not what I was expecting to see.

    Are you adding the code to your child theme’s header.php? If so can you post the content of the header.php as it was before you edited it and also with the slideshow code added so I can try to work out why the menu is doing this? – don’t forget to use the code backticks to post code to the forum.

    Thread Starter andersonfmly

    (@andersonfmly)

    The menu appearing at the bottom, I believe, is a new development. I don’t recall seeing it down at the bottom before, but that isn’t saying much with my lack of experience.

    I have tried adding it to both themes with no success.

    I am happy to post the code, but I’m not entirely sure what a ‘backtick’ is. I’m guessing it is a backward slash, so I will try to post it here and hope I am correct…

    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" >
    <meta name="viewport" content="width=device-width" >
    <title><?php wp_title('|', true, 'right'); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" >
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" >
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri() ?>/js/html5.js" type="text/javascript"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
    <div id="container">
    
    <?php do_action('slideshow_deploy', '335'); ?>
    
    		<div id="branding">
    			<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
    			<<?php echo $heading_tag; ?> id="site-title">
    				<a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    			</<?php echo $heading_tag; ?>>
    			<p id="site-description"><?php bloginfo( 'description' ); ?></p>
    		</div>
    
    		<nav id="menu-wrapper" <?php echo $birdtips_image_tag; ?>>
    			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'menu', 'menu_class' => '', 'menu_id' => 'menu-primary-items', 'items_wrap' => '<div id="small-menu"></div><ul id="%1$s" class="%2$s">%3$s', 'fallback_cb' => '' ) ); ?>
    		</nav>
    
    	</header>
    
    	<div id="wrapper">
    Moderator cubecolour

    (@numeeja)

    I meant the code button in the row of buttons just above the forum’s text entry box – I’ve edited your post so I can look at the code now.

    Thread Starter andersonfmly

    (@andersonfmly)

    Ahh, so THAT’s how you do it!!! Okay, let’s try again…

    <?php
    	// The header image
    	$birdtips_header_image = get_header_image();
    	$birdtips_header_image? $birdtips_image_tag = '' : $birdtips_image_tag = 'class="no-image"';
    
    ?>
    
    	<header id="header"<?php echo $birdtips_image_tag; ?>>
    
    <?php if ( ! empty( $birdtips_header_image ) ) : ?>
    	<?php if ( 'blank' == get_header_textcolor() ): ?>
    		<a href="<?php echo home_url( '/' ); ?>"><img src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" ></a>
    	<?php else: ?>
    		<img src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" >
    	<?php endif; ?>
    <?php endif; ?>
    Thread Starter andersonfmly

    (@andersonfmly)

    I just realized that posted only the section of code I replace. Let’s try this again…

    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" >
    <meta name="viewport" content="width=device-width" >
    <title><?php wp_title('|', true, 'right'); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" >
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" >
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri() ?>/js/html5.js" type="text/javascript"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
    <div id="container">
    
    <?php do_action('slideshow_deploy', '335'); ?>
    
    		<div id="branding">
    			<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
    			<<?php echo $heading_tag; ?> id="site-title">
    				<a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    			</<?php echo $heading_tag; ?>>
    			<p id="site-description"><?php bloginfo( 'description' ); ?></p>
    		</div>
    
    		<nav id="menu-wrapper" <?php echo $birdtips_image_tag; ?>>
    			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'menu', 'menu_class' => '', 'menu_id' => 'menu-primary-items', 'items_wrap' => '<div id="small-menu"></div><ul id="%1$s" class="%2$s">%3$s', 'fallback_cb' => '' ) ); ?>
    		</nav>
    
    	</header>
    Moderator cubecolour

    (@numeeja)

    What happens if you put the slideshow within the branding div?
    Instead of:

    <?php do_action('slideshow_deploy', '335'); ?>
    <div id="branding">

    this:

    <div id="branding">
    <?php do_action('slideshow_deploy', '335'); ?>

    Thread Starter andersonfmly

    (@andersonfmly)

    The code above is for the header file WITH the slideshow deployed. Sorry… Newby here.

    Moderator cubecolour

    (@numeeja)

    Actually hold that, I think I have found a possible clue.
    This block is showing as an inline style:

    #header #branding {
    	position: absolute !important;
    	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    	clip: rect(1px, 1px, 1px, 1px);
    	}

    Do you know where that’s coming from?

    What happens if it is changed to

    #header #branding {
    	}

    (ie the rules taken out)

    and this is added below:

    #menu-wrapper {
    	background: #000;
    	position: relative
    }

    Thread Starter andersonfmly

    (@andersonfmly)

    It would have come from the original header code. I didn’t change anything except to enter the slide show code, and delete the static image code. I’ll have to try out the solution in a little while.

    Thanks SO much for the help. I truly appreciate those who so willingly work with those of us who are still learning.

    Thread Starter andersonfmly

    (@andersonfmly)

    I am not seeing the code you referenced in the header file. Is it, perhaps, in the style sheet instead?

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Slideshow as header is blocking the menu’ is closed to new replies.