[Resolved] Support on some issues

Home Forums Support Support on some issues

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1027043
    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.

    #1027264
    Tom
    Lead Developer
    Lead Developer

    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.

    #1028734
    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!

    #1028924
    Tom
    Lead Developer
    Lead Developer

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

    #1028972
    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.

    #1029511
    Tom
    Lead Developer
    Lead Developer

    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;
    } );
    #1029540
    An Nguyen

    Hi Tom,

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

    Thanks.

    #1029829
    Tom
    Lead Developer
    Lead Developer

    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.

    #1032283
    An Nguyen

    It’s worked.

    Thanks Tom.

    #1032508
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.