WordPress.org

Forums

Slideshow
Slideshow as header is blocking the menu (20 posts)

  1. andersonfmly
    Member
    Posted 1 year ago #

    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/

  2. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 1 year ago #

    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.

  3. andersonfmly
    Member
    Posted 1 year ago #

    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.

  4. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 1 year ago #

    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.

  5. andersonfmly
    Member
    Posted 1 year ago #

    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.

  6. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 1 year ago #

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

  7. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 1 year ago #

    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.

  8. andersonfmly
    Member
    Posted 1 year ago #

    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">
  9. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 1 year ago #

    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.

  10. andersonfmly
    Member
    Posted 1 year ago #

    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; ?>
  11. andersonfmly
    Member
    Posted 1 year ago #

    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>
  12. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 1 year ago #

    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'); ?>
  13. andersonfmly
    Member
    Posted 1 year ago #

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

  14. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 1 year ago #

    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
    }
  15. andersonfmly
    Member
    Posted 1 year ago #

    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.

  16. andersonfmly
    Member
    Posted 1 year ago #

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

  17. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 1 year ago #

    Please disregard the troubleshooting steps I posted above; I believe I now have a better idea of what the code is doing.

    Can you just add the following block to the stylesheet of your child theme - or alternatively if you have somewhere in the theme or a plugin to to enter custom css rules, it can be entered there.

    #menu-wrapper {
    	background: #000;
    	position: relative;
    	top: -20px;
    	border: 1px solid #fff;
    }
  18. andersonfmly
    Member
    Posted 1 year ago #

    I'll give it a try… Thanks.

  19. andersonfmly
    Member
    Posted 1 year ago #

    IT WORKED!!!!! WAHOO!!!!!

    Goodness, gracious… I cannot begin to thank you enough for figuring this out. I've been at this for several weeks, have visited countless websites and forums, and NOBODY had been able to explain this until now. YOU ABSOLUTELY ROCK!!!

  20. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 1 year ago #

    Thank you for you kind words; I'm pleased to help.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Slideshow
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic