Site logo

Archived topic

Navigation as a Header Filter?

7 replies · Started by Thomas on March 25, 2021

Viewing posts 1–8 of 8

Hey folks. Thank you again for the great support and for the help with a previous issue with getting my front page navigation to be horizontally centered. Right now i'm running into a thing where I can't figure out how to get the "Navigation as a Header" option to only appear on pages that aren't the front page.

I notice right now when I enable navigation as a setting, everything works as intended except on the front page on Desktop & Tablets, I have the menu still showing up. I know this is due to my desired effect of having a off-canvas panel only on the front page.

I tried to explore the CSS but I couldn't figure out how to get it to turn off without turning off the top part that I want to keep.

Thank you for any help or any suggestions to make this effect better :)

Jeesh thanks I was looking for that filter action and couldn't find it!

Unfortuantely it doesn't seem to have done anything :(. The header still oddly shows. I'm wondering if it's conflicting with the other code I have in the functions file for the child theme?

remove_action( 'wp_footer', 'generate_slideout_navigation', 0 );
add_action( 'generate_before_header', function() {
	if ( is_front_page() ) :
		echo '<div class="header-wrap">';
		generate_slideout_navigation();
		echo '<div class="featured-container" style="background-image: url('. get_the_post_thumbnail_url(get_the_ID(),'medium_large') .  ')"></div>';
		echo '</div>';
	endif;
}, 2);

add_action( 'after_setup_theme','tu_remove_footer' );
function tu_remove_footer() {
    remove_action( 'generate_footer','generate_construct_footer' );
}

add_shortcode( 'current_year', 'lh_current_year' );
function lh_current_year() {
    ob_start();
    echo date('Y');
    return ob_get_clean();
}

add_shortcode( 'mobile_header', function () {
	ob_start();
	
	$featured_img_url = get_the_post_thumbnail_url(get_the_ID(), 'full');
	
	if (wp_is_mobile() ):
		echo '<div class="mobile-featured-container" style="background-image: url('. $featured_img_url .  ')"></div>';
	endif;
	return ob_get_clean();
});

add_filter( 'option_generate_menu_plus_settings', function( $settings ) {
    if ( is_front_page() ) {
        $settings['navigation_as_header'] = 'false';
    }

    return $settings;
} );

ignore this, see post below

I have one more question, sorry to thread spam!

Is there a way to get the navigation as a header to be true for the front page if user is on mobile?

I can accomplish this using wp_is_mobile but I read that it's bad form to use that filter? Is that true?

The php code above still didn't work for some odd reason. I tried to reverse the logic and it worked, except I wanted to be able to keep the navigation as a header on for the mobile front page.

Here is the reverse code:

add_filter( 'option_generate_menu_plus_settings', function( $settings ) {
    if ( is_front_page() == FALSE ) {
        $settings['navigation_as_header'] = 'true';
    }

    return $settings;
} );

I did figure out the CSS to turn the bar off on desktop and tablet though, which would be another option.

.home #site-navigation{
                display: none;
}

But I have a fear that doing something like that would have a effect on SEO? I dunno. Thank you for the help! :)

Hi there,

the main issue with the wp_is_mobile function is server page caching. You may find the server caches the desktop layout and servers that up on mobile. Its also reliant on a list of Client headers that may not be 100% up to date, so some device clients may not be listed and therefore don't trigger the function.

I don't see an issue using CSS to hide a navigation. Its a common and acceptable practice to do this, as most sites rely on it for displaying a desktop nav and mobile nav.

Excellent. That's what I feared about wp_is_mobile. :(

Thank you so much David and GP team!!!

You're welcome :)

This archived topic is closed to new replies.