I am facing a dilemma with my classes for the menu and content sections of my website. The menu is controlled by .site-header-menu class.
Meanwhile, the content section is managed by the .content class. I want to know how I can target the .content when the .site-header-menu is displayed?
I attempted to use the following CSS code but it didn't work as expected:
.site-header-menu + .content{
opacity: 0;
}
Do you have any suggestions on achieving this effect using CSS?
I am working with Wordpress, and here is the PHP structure in my header.php file. My objective is to hide the content of the page template when the site-header-menu is open:
<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>
<!--<button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>-->
<button id="menu-toggle" class="menu-toggle" data-title="<?php the_title(); ?>"><?php the_title(); ?></button>
<div id="site-header-menu" class="site-header-menu">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>" data-title= ''>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav><!-- .main-navigation -->
<?php endif; ?>