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

[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.

[Tom]

Hi there,

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

Let me know 🙂

[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.

[Tom]

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

Then do this:

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

[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>

[Tom]

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?

[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.

[Tom]

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

[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.

[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.

[Tom]

No problem! 🙂

[Author]

Posts