[Resolved] Navigation on a page with a sticky menu (on top or on bottom)

Home Forums Support [Resolved] Navigation on a page with a sticky menu (on top or on bottom)

Home Forums Support Navigation on a page with a sticky menu (on top or on bottom)

  • This topic has 10 replies, 2 voices, and was last updated 2 years ago by Tom.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #915704
    Bernhard

    Hi there,
    my excuses for all my questions, I try actually to optimize the user experience of my site and one important thing is the navigation.
    Beside the navigation on desktop and the slideout navigation on mobile, I need a navigation on the page as the pages have more chapters and user will not scroll up/down without a navigation.
    I tried the Float menu pro plugin but it has some bugs on mobile it’s actually not useful for my goal.

    I have implemented links on a page already with Anywhere Elementor like in this sample after the first paragraph. Now I want to make it sticky on top of the page, behind the navigation bar.

    What I did until now:
    I created one Element for the sticky bar

    <style>
    .stickynav   { 
    	position: fixed; left: 0; top: 0; 
    	}
    </style>

    and then I created an Element before_main_content with the content = Anywhere Elementor shortcode – actually it displays the text blabla- blabla on my test page

    The problem is, that the content is shown in the foreground, above the navigation menu. I would like to have it in the background, in the way, that it appears only when the navigation menu disappears by scrolling down.

    How can I configure it.

    #915800
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Have you tried our sticky navigation option?: https://docs.generatepress.com/article/sticky-navigation/

    Let me know ๐Ÿ™‚

    #915810
    Bernhard

    Hi Tom,
    yes, my main navigation is sticky. Now I want to add a second level for navigation on the single page between the chapters of the page. My question is only how to put the display of the element behind the navigation bar.

    #915822
    Tom
    Lead Developer
    Lead Developer

    Ah, sorry. Try giving your .stickynav class a z-index: 1 property.

    Then do this:

    #site-navigation {
        z-index: 10;
        position: relative;
    }
    #916198
    Bernhard

    Hi,
    this works so far. The problem is, that the jquery, which closes on scroll the GDPR popup in the upper right corner, does not work anymore.
    The jquery of the popup is

        var $window = jQuery(window);
        $window.ready(function () {
            var originalScrollTop = $window.scrollTop();
            $window.on('scroll', function () {
                if (originalScrollTop != $window.scrollTop()) {
        PUM.close(15035);
    	  PUM.close(11588);
    	  PUM.close(11580);
                }
            });
        });

    Now I’m wondering, if I could trigger with this also the opening of my on site navigation.
    For the on site navigation I create the content with Anywhere Elementor and I call it with an Element before_main_content

    <div class="stickynav">[INSERT_ELEMENTOR id="20832"]
    </div>
    #916374
    Tom
    Lead Developer
    Lead Developer

    That CSS shouldn’t stop jQuery from working? Perhaps it’s the javascript error on the page? I believe that’s happening because of Autoptimize and the WPSP carousel?

    #916617
    Bernhard

    Hi Tom,
    yes, you are right.
    I have now rolled out this on page menu on one page.
    Now I have still one problem: I have to define a selector for the plugin “page scroll to ID” so that it shows the ID below the on page navigation. I confess, I have no idea how to define a selector and I would be really happy for your help.

    #916708
    Tom
    Lead Developer
    Lead Developer

    What kind of selector does it need? Are there specific instructions somewhere?

    #916873
    Bernhard

    Hi Tom,
    in the settings of the plugin I can define
    Offset scroll-to position by x amount of pixels (positive or negative) or by selector (e.g. #navigation-menu)

    Actually I use #navigation-menu and this works quite well, so I would like to define a second selector to set the scroll-to position below the sticky on page navigation bar. The positioning by amount of pixels seems not to work properly.

    #916996
    Bernhard

    Hi Tom,
    I found in the documentation of the plugin that I can define the height with CSS. So I will use that way.
    Thank you for your help.

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