[Resolved] Re: Menu Not Displaying Properly

Home Forums Support [Resolved] Re: Menu Not Displaying Properly

Home Forums Support Re: Menu Not Displaying Properly

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1793518
    Monkeys and Mountains

    My menu usually displays all on one line but now the “search” is appearing on another row. I didn’t change CSS or anything that should have impacted it. Please advise how to fix. https://monkeysandmountains.com/

    Thank you

    #1793602
    David
    Staff
    Customer Support

    Hi there,

    the search icon is part of the Menu Bar Items container – you can place it inside the navigation menu by adding this PHP snippet:

    add_filter( 'wp_nav_menu_items', function( $nav, $args ) {
        if ( 'enable' !== generate_get_option( 'nav_search' ) ) {
            return $nav;
        }
    
        if ( isset( $args->theme_location ) && 'primary' === $args->theme_location ) {
            $search_item = apply_filters(
                'generate_navigation_search_menu_item_output',
                sprintf(
                    '<li class="search-item menu-item-align-right"><a aria-label="%1$s" href="#">%2$s</a></li>',
                    esc_attr__( 'Open Search Bar', 'generatepress' ),
                    generate_get_svg_icon( 'search', true )
                )
            );
    
            return $nav . $search_item;
        }
    
        return $nav;
    }, 10, 2 );

    It will then always come after the last menu item even on smaller screens where your menu will wrap to a new line.

    #1794030
    Monkeys and Mountains

    Thank you for this. I added it using the code snippet plugin that I saw you recommended to someone else but it still didn’t fix the issue.

    Please advise.

    Thank you

    #1794108
    Ying
    Staff
    Customer Support

    Hi there,

    Just inspected your site, it seems the PHP code hasn’t been added to the site, could you confirm?

    Let me know πŸ™‚

    #1794117
    Monkeys and Mountains

    Oops, I added it, but didn’t realize that I had to turn it on. I did that now but it didn’t fix the issue.

    Please advise.

    #1794124
    Ying
    Staff
    Customer Support

    The search has been added as a menu item, you now have 2 search icons in the header.

    You can use this CSS to hide the one in menu bar items on desktop and hide the other on mobile:

    @media (min-width: 769px) {
        .menu-bar-item.search-item {
            display: none;
        }
    }
    @media (max-width: 768px) { 
        .main-navigation li.search-item {
            display: none;
        }
    }

    Now it looks like this:
    https://www.screencast.com/t/ytstbF7E

    If you don’t see the same, clear your browser cache.

    Let me know πŸ™‚

    #1794145
    Monkeys and Mountains

    Thanks but I want it all on one line, which it was until yesterday. Not sure what happened since I didn’t change any CSS.

    Please advise how I can get it all (including the About and Search) on one line again.

    Thanks

    #1794181
    Ying
    Staff
    Customer Support

    There just simply not enough space for all the menu items to be in one line, in a bigger screen, they can be in one line as screenshot below. You can try to decrease the menu item width.
    https://docs.generatepress.com/article/navigation-drop-point/

    Or you can try the drop point setting, when the screen shrinks, they will drop together and still be one line.
    https://docs.generatepress.com/article/navigation-drop-point/

    #1794494
    Monkeys and Mountains

    What I don’t understand is that on Friday there was enough space, so I don’t know how suddenly there’s not. Anyway, I implemented your suggestions and they worked, so thank you.

    The only remaining issue is that the search is appearing twice (which it also wasn’t doing on Friday). It should only be in the top navigation menu, not below.

    Please advise how to fix.

    Thank you,

    #1795068
    Tom
    Lead Developer
    Lead Developer

    You should be able to remove the PHP David provided above (https://generatepress.com/forums/topic/re-menu-not-displaying-properly/#post-1793602) to remove the second navigation search icon.

    Let us know πŸ™‚

    #1795228
    Monkeys and Mountains

    That fixed it. :). Thanks so much for your help. I really appreciate it.

    #1796294
    Tom
    Lead Developer
    Lead Developer

    No problem!

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