[Resolved] Re: Menu Not Displaying Properly

[Monkeys and Mountains Adventure Travel]

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

[David]

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.

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

[Monkeys and Mountains Adventure Travel]

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

[Ying]

Hi there,

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

Let me know 🙂

[Monkeys and Mountains Adventure Travel]

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.

[Ying]

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 🙂

[Monkeys and Mountains Adventure Travel]

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

[Ying]

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/

[Monkeys and Mountains Adventure Travel]

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,

[Tom]

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 🙂

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

[Monkeys and Mountains Adventure Travel]

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

[Tom]

No problem!

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

[Author]

Posts