My hamburger menu is working correctly on all other pages - I just don't want it to display on the home page, where it's currently visible at 768px and below.
footer.php is where the menu is located:
<div class="mobile-nav">
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</div>
<div class="responsive-menu">
<?php
if ( ! is_front_page() && ! is_home() ) {
wp_nav_menu();
}
?>
</div>
</div>
You can see that I've told it not to display the nav menu on the front page (which is also the home page), and it's doing this correctly - but how do I do the same thing to the hamburger menu?
I followed the instructions in this tutorial to create my hamburger menu. If I try to copy the PHP if statement that's telling the browser to display the Nav Menu on all other pages except for the Front Page / Home Page and then paste it just before the div with class and id "menu-btn", I get a syntax error:
<div class="mobile-nav">
<?php if ( ! is_front_page() && ! is_home() ) {
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</div>
}
?>
<div class="responsive-menu">
<?php
if ( ! is_front_page() && ! is_home() ) {
wp_nav_menu();
}
?>
</div>
</div>
I'm not sure if there's a way to hide the hamburger menu on a specific page with CSS, or, if I do need to use PHP or JS, where should I place the function / what function should I use?
Thank you!
You must close php code section before you print HTML code.
<div class="mobile-nav">
<?php if ( ! is_front_page() && ! is_home() ) : ?>
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</div>
<?php endif; ?>
<div class="responsive-menu">
<?php
if ( ! is_front_page() && ! is_home() ) {
wp_nav_menu();
}
?>
</div>
</div>
You are mixing the HTML
with your PHP
.
Try this:
<?php if ( ! is_front_page() && ! is_home() ) { ?>
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</div>
<?php } ?>
Explanation:
As you can see you have the <div>...</div>
inside of your PHP
. You need to close first your php-section
, then post your html
, and then you have to end your if
.
You just need a ?>
after your if(...) {
Hope this helps.
You can do like that:
<?php if ( ! is_front_page() && ! is_home() ) {
<div class="mobile-nav">
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</div>
<div class="responsive-menu">
<?php
wp_nav_menu();
?>
</div>
</div>
}
?>