menu customization

Hi there,

you could try the code provided here:

https://www.billerickson.net/code/submenu-items-in-secondary-menu/

This will auto populate the Secondary Navigation with any sub menus you have set on your Primary Navigation

Then you can use this CSS to hide the dropdowns on the Primary Nav:

.main-navigation ul li:not(.current-menu-item):hover ul,
.main-navigation .main-nav .menu-item .dropdown-menu-toggle  {
    display: none;
}

.main-navigation .main-nav ul li.menu-item-has-children>a {
    padding-right: 10px;
}

well thats part of it, but i want the submenu to be static on the "currently displayed" page and look like the "top bar", below the header.

Then have the sub menu inherit the main nav css allowing it to become the main when nav when scrolling.

So it emulates another full width menu, so to speak.

All of the styles and it position will be controlled by the Secondary Nav settings in the customizer. And you can use some CSS to make the element stick. Happy to help with that if i can see your site.

ok i installed all the code and put a sub-menu in products to see. I guess the first place to start is making the submenu show static and full width like the main navigation, not on the hover.

Then a way to style it similar to the main navigation so when you scroll, the main float up and the secondary (sub-menu) is only seen.

make sense?

I also edited the link to reflect my website

I haven't used the method David suggested, but it looks like you need to create an empty menu and apply it to the Secondary Navigation in "Appearance > Menus".

That way the Secondary Nav should display with the items from your sub-menus if the above code works as it should.

Let us know :)

ok, I made some progress. The menu now shows, however the dropdown is still displaying over the menu.

What i did was add the primary navigation to the secondary menu as well. (checked both boxes) Seems like the same menu has to me in both?

* Assign the same menu to 'header' and 'secondary'.
* This will display the current section's subpages in 'secondary'

And for some reason I cant see the menu item, its on the far left and kind of invisible. Thought it was a color issue but cant seem to fix it. (link is there and works though)

Also would like the sub navigation menu to become sticky when it is shown, and the main navigation float up when scrolling.

You guys are amazing btw!

And it’s showing the sub nav on Mobile, which is undesired :)

disregard the part about:

And for some reason I cant see the menu item, its on the far left and kind of invisible. Thought it was a color issue but cant seem to fix it. (link is there and works though)

Looks like all you need is to remove the sub menu on mobile. This CSS will do that:

@media(max-width: 768px) {
    .secondary-navigation {
        display: none;
    }
}

Alright, we're getting there.

Now can we make the secondary nav "sticky" and the primary nav above it to "hide when scrolling down"? (only when the secondary nav is present of course)

I'm also using your underline css in the primary nav (found it here somewhere). It seems to be offset to the left now, for the arrow spot I assume. Can it be adjusted to center again?

...And is it possible to change the "menu hover animation" animation. The part of the underline that makes the line increase in size. I still want the animation, I just want it to display as a full size line fading in instead of the line expanding, if that makes sense.

Tried this, but it looks and responds a lot different:

.main-navigation ul li:hover a {
    text-decoration: underline;
}

You can use this CSS to make the secondary nav sticky.

.secondary-navigation {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

But you would need to disable the Sticky Navigation option in the customizer to make it work.
You can do that selectively with this filter:

https://docs.generatepress.com/article/option_generate_menu_plus_settings/

Best to get the basics right then we can look at the other styling options you need.

Excuse me bing green to this...

*But you would need to disable the Sticky Navigation option in the customizer to make it work.

Do you mean uncheck it sitewide? or will the filter handle it per page.

and...
Do I need to write a filter for each page this sub nav will display on?

Sorry, really new to composing php

ok, came up with this, but it disables the sticky for main nav on all pages, not just products..any ides?

add_filter( 'option_generate_menu_plus_settings','lh_custom_products_menu_plus_settings' );
function lh_custom_products_menu_plus_settings( $options ) {
     	is_page( $page = ‘products’ ); {
        $options['sticky_menu'] = 'false';
        $options['mobile_header'] = 'enable';
        $options[‘mobile_header_sticky’] = 'enable';
        $options[‘mobile_header_auto_hide_sticky’] = 'false';
    }
    
    return $options;
}

..also the secondary nav does not seem to be sticking on that css..maybe im putting it in the wrong place? "additional css"