Anchor text is hidden behind the menu

Hi there,

there is this CSS hack:

h2[id] {
    padding-top: 150px;
    margin-top: -150px;
}

What that does is create an offset margin for ALL H2s that have an ID. That offset is taken into consideration when an anchor link jumps to it.

The only alternative would require a Javascript solution.
The Theme has one built in - but you have to use the Themes Sticky Navigation and Smooth Scroll options.
You may want to consider this - as your current sticky navigation occupies a LOT of screen real estate especially on narrower screens

Hi David,

Thanks for your fast response.

You wrote (..) You may want to consider this – as your current sticky navigation occupies a LOT of screen real estate especially on narrower screens (..).

If I understand you correctly:
I agree with you. After I evaluated the menus for a second time and resized the screen, the menu options even distributes over 2 rows, taking more space.

I choose for a sticky menu to give visitors the feeling that they always have the feeling the're in control and know where they are.

Is this a right assumption or has a sticky menu in my case not that much added value? And should I not use a sticky menu?
To help users, I always show an icon on the right side "back to top".

Thanks in advance for your reaction.

I think you need to find a happy balance :)
My personal view - I would try out:

1. Temporarily disable your CSS sticky header.
2. Enable the Themes Sticky Navigation.
3. Increase the Mobile Menu Breakpoint in Customizer > Layout > Primary Navigation - so the hamburger appears on those table sized devices ( 1024px )

That way the primary nav is still present when scrolling but it occupies a LOT less space.

Much better!

Thanks David.

Glad to hear that

Hi David,

I enabled the theme sticky navigation, it automatically hides when a user scrolls further down the page. As soon as the user scrolls a litte up the main navigation is display. This is working as expected. This way I'm use the screen space more efficiently as you suggested.

But the secondary navigation (the top menu) is only shown when the user has scrolled up to the beginning of the page.

I think it would for the user be more helpfull that both menus are display as soon as they scroll upward.
Is it possible that the secondary navigation is also displayed with the event scroll up?

Thanks, Henk

Its not possible without custom development.
GP's Sticky Navigation was only designed for sticking just the primary navigation, which we thought was the best user experience as it display the Primary Menu items without taking up too much space :)

I understand.

What I could do, is make the top menu (secondary navigation) sticky with the CSS below. An argument for this solution could be that the menu contains the items home, contact and phone number. And I keep the main menu sticky like it's now.

Another alternative could be a best-practice what other developers use. Do you know one?

@media (min-width:769px){
    .secondary-navigation {
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
        z-index: 10000;
    }

}

Hmmm... i am not sure if theres a good option that won't result in the original issue ie. Anchor text is hidden behind the menu

I marked the topic as unresolved so you can access the Private info fields again, can you supply me the URL of the site so i can take a look at options.

Thanks that you'll have look, I appreciate it.
I'm looking forward to your suggestions.

Not sure on this but what you cant try is move the secondary nav inside the primary nav:

1. Set the Customizer > Layout > Secondary Navigation –> Location to No Navigation.
2. Create a new Hook Element:

Add this snippet to the hook content:

<?php generate_secondary_navigation_position(); ?>

Select the inside_navigation hook
Check execute PHP
And set the Display Rules to Entire Site

This will place it in the same container. So it should be part of the sticky nav. It may require some CSS to position it.

I made the changes in the staging environment, see private area for the URL.
In this way I don't break the production environment.

After the changes, the logo is getting in the way, the menus are now (too) high?
Can I ask you again to help me find a solution? I don't have any design requirements, so if you have nice idea your design will be our design for the next years ;-)

Edit the Hook and set the Priority to 0
Then add this CSS to position it as it was originally:

.secondary-navigation {
    flex: 1 0 100%;
}

And then we need a little CSS to restyle the secondary nav:

.main-navigation .secondary-navigation .main-nav ul li a {
    line-height:2.1em;
    margin: 0;
    padding: 0 20px;
}

Wow David, awesome!

I'll also print this chat out to study it.