[Support request] menu customization

Home Forums Support menu customization

Viewing 15 posts - 1 through 15 (of 38 total)
  • Author
    Posts
  • #1383414
    Jeffrey

    I am looking to have the sub-menu (probably the sub navigation menus) operate like this site.

    Is there a way to have the “sub menu” only show when top level “menu item” is selected. And to also merge with header as seen in example. (maybe even add the a logo too? or widget?)

    So..

    Once a sub menu/nav is displayed it inherits the styling of the main nav (merge with header) and the main nav then acts like the “top bar widget”, disappearing.

    If no sub menu/nav’s exist, the menu behaves normally (merge with header)

    #1383503
    David
    Staff
    Customer Support

    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;
    }
    #1383584
    Jeffrey

    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.

    #1383737
    David
    Staff
    Customer Support

    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.

    #1384141
    Jeffrey

    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?

    #1384160
    Jeffrey

    I also edited the link to reflect my website

    #1384290
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1384325
    Jeffrey

    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!

    #1384337
    Jeffrey

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

    #1384432
    Jeffrey

    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)

    #1384594
    David
    Staff
    Customer Support

    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;
        }
    }
    #1384653
    Jeffrey

    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;
    }
    #1384681
    David
    Staff
    Customer Support

    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.

    #1384687
    Jeffrey

    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

    #1384860
    Jeffrey

    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”

Viewing 15 posts - 1 through 15 (of 38 total)
  • You must be logged in to reply to this topic.