[Resolved] Support on some issues

[An Nguyen]

Hi,

I need your support on some stuff:

1/ After creating a hook with some shortcodes (gp-social+tableofcontent+clap) after-entry-header in single post and styling CSS to create these sticky elements, they work so cool. However, I can not control the position that they need to stop sticky. You can see via link attachment. They don’t stop at the end of content and stop at the comment area. I tried to set height of each element, but it will break my content layout. I just want they stop at the end of content.

2/In post page (desktop mode), I also need that the title of post displays on sticky nav like this link. Can I achieve this? My posts is very long so I need that feature and also tableofcontent (in issue1) .

Thanks in advance.

[Tom]

Hi there,

1. You would need javascript for this, unfortunately. CSS itself isn’t able to know where to stop the fixed element. There are tons of javascript sticky solutions out there that should help if you do some looking around.

2. Where exactly would it display? There doesn’t seem to be a lot of room left over in your navigation.

[An Nguyen]

Hi Tom,
1/ Thanks for your suggestion. Let me try!

2/Now in post page, I have topbar and main-nav(not in sticky mode keep them as current). I want when they become sticky mode just show only main-nav and inside main-nav just have logo on the left side and search icon and cavas officon in the right side. The title of post is in middle. Like the link of a sample above. Thanks Tom!

[Tom]

Can you turn on the sticky navigation so I can play with it in developer tools?

[An Nguyen]

Hi Tom,

I did. However, I want to turn it off in other pages. If not, other pages will have an error on display background image (using linear-gradient) on site-header. You can go other page and scroll down to active sticky-nav to see this error. Therefore, I reckon that there are 2 options to fix this but I don’t know which one GP support these.

1/ I want sticky main nav on single-post only.

2/ Can we detect when user scrolls down and we will turn off site-header background-image (linear) on the other page and using sticky main-nav? If it does, it will be supper cool. Logically, I think GP can do because it likes the feature of sticky-nav when user scrolls down and GP detects this action and then sticky-main-nav appears.

I prefer option 2 to fix this issue but I don’t know GP support to do it or not. After that you can help me with title on stick-nav.

[Tom]

Detecting when the user scrolls down would require custom javascript, which is outside the scope of this forum.

You can enable the sticky nav on single posts only like this:

add_filter( 'option_generate_menu_plus_settings', function( $settings ) {
    if ( ! is_single() ) {
        $settings['sticky_menu'] = 'false';
    }

    return $settings;
} );

[An Nguyen]

Hi Tom,

It’s done. I’m waiting for next step.

Thanks.

[Tom]

Try this:

add_filter( 'generate_sticky_navigation_logo_output', function( $output ) {
    $post_title = '<div class="sticky-post-title">' . get_the_title() . '</div>';

    return $output . $post_title;
} );

Then add this CSS:

.main-navigation:not(.navigation-stick) .sticky-post-title {
    display: none;
}

It might need some more tweaking once it’s added.

[An Nguyen]

It’s worked.

Thanks Tom.

[Tom]

You’re welcome 🙂

[Author]

Posts