[Support request] Sticky secondary menu

[Rick]

Hi Tom,

How can I set the secondary menu also to sticky?
The secondary menu is below the header. So I just want to have 2 menus sticky.

Thanks.

[rex wickham]

Yes this would be useful for me too.

[Tom]

It’s not a feature yet, but it is planned.

It will be tricky because if the primary nav is also sticky, the secondary nav will need to have the logic to display below the primary nav – not easy.

However, it is going to happen in one of the upcoming versions 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alex]

Hey Tom,

What if the primary menu is not sticky? How can I just make only the secondary menu sticky?

[Leo]

Hi Alex,

That case you the easiest solution is to actually switch the primary menu and secondary menu.

Both of them actually have the same features (except navigation logo, which we can compensate if you are using it).

Let me know if this makes sense.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

Yeah I thought of that already, though it is not entirely helpful because:

1) The primary navigation seems to always be on top, if I were to do what you suggested how do I get it to be after the secondary navigation?

2) The secondary navigation doesn’t allow logos, how can I add this?

[Leo]

what’s your setting for navigation locations currently? both below header?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

Hey Leo,

I got the positioning figured out by having one above the header, the other below and setting the header image to background. However I am no trying to address my second point of inserting the logo in the secondary navigation. I came across another one of your posts where you said that you can add this code to the functions.php file of the child theme:

add_action( 'generate_inside_secondary_navigation','add_secondary_navigation_logo' );  
function add_secondary_navigation_logo() { ?> 
    <div class="secondary-navigation-logo">
        <img src="THE URL TO YOUR IMAGE" alt="" />
    </div>
<?php }

While this seems to work, I am trying to figure out how to style it like it would be in the primary navigation. Do you know the CSS selectors I should be using?

[Alex]

Got it!

I was looking for .navigation-logo

Everything is working now.

[Leo]

Awesome! Glad you got it 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

Hey Leo,

I did run into something else. I am building a restaurant’s website so the secondary navigation is for the menu page and includes anchors to the submenus (dinner, lunch, dessert, etc.). I want this navigation to be sticky and only on the restaurant menu page.

I switched the primary/secondary nav menus as described above and disabled the primary nav on all pages except the restaurant menu page. So far so good.

However, it appears that disabling the primary nav does not work with the mobile menu. Whenever I am in mobile view it still appears on every page. So my primary nav for the restaurant submenus shows up on the homepage, about, contact, etc.

How do I disable this and only have it activated on a particular page, in this case the restaurant menu page?

[Alex]

So I’m guessing that I need to do something similar to this article:

https://docs.generatepress.com/article/navigation-location/

In that I need to write an if not conditional for all pages other than the restaurant menu, return ” for the navigation. I just am having trouble finding the exact hook for the mobile navigation menu.

[Tom]

Hi Alex,

Any chance you can link me to one of the pages where the mobile menu is appearing when it shouldn’t?

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alex]

Hey Tom,

Here’s the website I am currently working on: https://www.moose.ninja/hannasprimesteak/menu/

The gold primary nav is what I only want on the menu page. That works fine as is until you go into mobile view and the toggled menu is visible on all pages.

[Leo]

You have this CSS added which is hiding the gold navigation:

nav#mobile-header {
    display: none !important;
}

Let me know if this answers your question.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts