[Support request] Control menu visibility on specific pages.

[ilovemusic]

Hey!

I want to show sticky menu only on homepage!

Wondering if this is possible with either a Plugin or basic html or by adding the code in the header or footer webhooks.
I am not new to HTML and can manage.

[Leo]

Hi there,

Try this CSS:

.main-navigation.navigation-stick {
    display: none;
}
.home .main-navigation.navigation-stick {
    display: block !important;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Tom]

That likely won’t work, as it will always display the sticky menu, even when not sticky.

Try this:

body:not(.home) #sticky-navigation,
body:not(.home) #sticky-placeholder {
    display: none;
}

[ilovemusic]

Hey Tom,

Used your given CSS above!
Thanks that works!
The sticky menu now has been deactivated on all pages except my home page.

However, whenever I scroll up and down on a page, the primary too disappears.

Could you suggest?

Thanks.

[Tom]

Can you link me to the page?

[ilovemusic]

Hey Tom,

Here’s the link to the page! Please check 🙂
http://demo.ilovemusic.edu.in/emp2-2/

Scrolling up and down makes the primary navigation disappear too!

Thanks!

[Leo]

Hmm can’t seem to get the primary menu to disappear after scrolling up and down a few times…

[Tom]

Let’s try this PHP instead:

add_action( 'wp_enqueue_scripts','tu_disable_home_sticky', 100 );
function tu_disable_home_sticky() {
    if ( is_front_page() ) {
        wp_dequeue_script( 'generate-sticky' );
    }
}

[ilovemusic]

Hello!

So i added the php that you provided above using the Spippets plugin for wordpress.

add_action( ‘wp_enqueue_scripts’,’tu_disable_home_sticky’, 100 );
function tu_disable_home_sticky() {
if ( is_front_page() ) {
wp_dequeue_script( ‘generate-sticky’ );
}
}

This function however is only deactivating the sticky on all pages. :/

Any suggestions?
Thanks.

[Tom]

I just tested it, and it only disables the sticky menu on the home page.

How did you add the function?

[ilovemusic]

Hey!
As mentioned above, I used a wordpress plugin called “Code Snippets”

Could you tell me how you added it?
I shall re trace your steps!!

Cheers!

[Leo]

That’s the right method. Is the code added on this site currently? http://demo.ilovemusic.edu.in/

[ilovemusic]

Hey Leo,
Its not currently!

[ilovemusic]

I shall add it again and see if it works and shall leave it like that for you to check!
Thanks!

[ilovemusic]

Hey Tom.
So here’s where we have reached so far:

My query was : Show sticky menu only on homepage!

– I added the CSS code given by Tom :

body:not(.home) #sticky-navigation,
body:not(.home) #sticky-placeholder {
display: none;
}

Result:
SUCESS: The sticky menu now has been deactivated on all pages except my home page.
Problem: Whenever I scroll up or down and return to the top of any other (not my home )page, the primary navigation disappears too.

– As Later suggested by Tom add PHP function. :

add_action( ‘wp_enqueue_scripts’,’tu_disable_home_sticky’, 100 );
function tu_disable_home_sticky() {
if ( is_front_page() ) {
wp_dequeue_script( ‘generate-sticky’ );
}
}

Result: This function however is only deactivating the sticky on all pages.

End Result: With both, the CSS code and the PHP function added, the sticky menu is disabled on all the pages where as I need to hide the sticky menu only on the home page. Also, on scrolling up and down and then going back to the top, the primary navigation doesn’t reappear.

[Author]

Posts