Navigation being inturrupted by anchor tag in page

I’m have an issue with my sub-menu navigation an I’m hoping someone can help me. The nav seems to be working properly on all pages except for ‘Programs’, where it looks transparent and when I hover over an anchor tag in the page the nav sub-menu disappears.

nav is working fine nav is messed up

I’m not sure what could be causing it. My first instict says that it must be something z-index related, but I tried applying different z-indexs and it didn’t seem to affect anything. I also think it’s weird it’s only affecting one page.

This is a wordpress website. Here is the relivant html and php code from my template file:

 <main id="primary" class="site-main">
            <div class="margin-center">
        <?php if ( have_posts() ) : ?>

            <header class="page-header">
                <h1> Programs </h1>
                
                <?php
                the_archive_description( '<div class="archive-description">', '</div>' );
                ?>
            </header><!-- .page-header -->

            <?php
            /* Start the Loop */
            while ( have_posts() ) :
                the_post();

                /*
                 * Include the Post-Type-specific template for the content.
                 * If you want to override this in a child theme, then include a file
                 * called content-___.php (where ___ is the Post Type name) and that will be used instead.
                 */
                $image = get_field('program-image');
                ?>
                <div class="content_info program_info col-lg-3 col-md-4 col-sm-6 col-xs-12 ">
                <a href="<?php the_permalink() ?>">
                

                <div class="program_info_box ">
                    <div class="program_image">
                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> 
                    </div> <!--.program_image ends -->
                <div class="program_title"> <p><?php the_title(); ?> </p> </div>

            </div> <!-- .white_box_blue ends-->
                </a>
                </div> <!--- .recruitment_info ends -->
                
            <?php endwhile;
                           
    ?> <div class="clearfix"></div> 
    <?php

        else :

            get_template_part( 'template-parts/content-none', 'none' );

        endif;
        ?>
            </div> <!--- .margin-center ends --->
    </main><!-- #main -->

Here is the relivent CSS for the navigation:

.main-navigation {
    display: block;
    float:left;
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 100%;
    left: -999em;
    display: block;
    background-color:white;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {

    left: auto;
}


.main-navigation ul ul a {
    width: 200px;
    border:none;
    z-index:90;
    position: absolute;
}


.main-navigation ul ul a:hover {
    border:none;
    color:#5bbda8;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    display: block;
    text-decoration: none;
}

Here is the relivent css for the program page:

.program_info a{
    text-decoration:none;
    color:black;
}

.program_info{
    float:left;
}

.program_info_box {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}


.program_info p {
    font-size:1em;
    padding:10px;
    font-weight:600;
}

.program_info:hover img {
  transform: scale(1.2);
}

.program_image{
    text-align: center;
    overflow: hidden;
}


.program_title p {
    font-size:16px;
    text-align: center;
}

#program_info_page .program_image img {
    height:300px;
    width:100%;
    object-fit:cover;
}

#program_info_page .program_image {
    overflow:hidden;
    object-fit:cover;
}

I really hope that someone will be able to help me with this!

Thanks, Betsy

Answer

You have a z-index issue on your nav. Just add this CSS and your nav will start working properly.

header#masthead {
    position: relative !important;
    z-index: 99999 !important;
}

The reason behind your z-index was not working maybe your existing styles which are overlapping the current styles.

Advertisement

Answer