Re: Menu Not Displaying Properly

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.

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

Hi there,

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

Let me know :)

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.

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 :)

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

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/

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,

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 :)

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

No problem!