Menu drop downs over slider

  • Hi again,

    On our site https://campervanculture.com we would like to place our menu bar back above the slider. It contains a couple of drop down menus (“About” and “Video Blog”), these were disappearing behind the slider. Is there anyway for the drop down menus to take priority?

    Thank you again for your help. Dan

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Josh Leuze

    (@jleuze)

    Hi Dan, try changing the z-index of the submenus like this so that they are layered above the slideshow:

    
.main-navigation li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    z-index: 9999;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
    Thread Starter danmetallic

    (@danmetallic)

    Thank you for posting this. So which bit would I adapt if this is my current header.php?

    <?php
/**
 * The Header template for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">
		<hgroup><a href="https://www.campervanculture.com"><img class="alignnone size-full wp-image-12946" src="https://campervanculture.com/wp-content/uploads/2016/09/Header_logo-1.jpg" alt="CVC logo FINAL Solid Fill (Short)" width="960" height="43" />
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

	

		<br><?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
	<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation --></header><!-- #masthead -->

	<div id="main" class="wrapper">
    Plugin Author Josh Leuze

    (@jleuze)

    Sorry Dan, I missed your reply. The code I shared is CSS, which goes in your theme’s style.css file. There should already be code like that in there, you just need to edit it.

    Thread Starter danmetallic

    (@danmetallic)

    No worries. Thanks for the reply. I couldn’t see which bit to replace. I’ve posted my current code above. Sorry to be a pain.

    Plugin Author Josh Leuze

    (@jleuze)

    Dan, are you trying to move the menu, or style the menu dropdowns to display above the slideshow?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Menu drop downs over slider’ is closed to new replies.