- This topic has 11 replies, 4 voices, and was last updated 2 years, 10 months ago by Tom.
-
AuthorPosts
-
May 22, 2021 at 3:53 am #1793518Monkeys 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
May 22, 2021 at 5:31 am #1793602DavidStaffCustomer SupportHi 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.
May 22, 2021 at 9:39 am #1794030Monkeys and MountainsThank 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
May 22, 2021 at 10:58 am #1794108YingStaffCustomer SupportHi there,
Just inspected your site, it seems the PHP code hasn’t been added to the site, could you confirm?
Let me know π
May 22, 2021 at 11:12 am #1794117Monkeys and MountainsOops, 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.
May 22, 2021 at 11:32 am #1794124YingStaffCustomer SupportThe 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/ytstbF7EIf you don’t see the same, clear your browser cache.
Let me know π
May 22, 2021 at 12:05 pm #1794145Monkeys and MountainsThanks 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
May 22, 2021 at 1:02 pm #1794181YingStaffCustomer SupportThere 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/May 23, 2021 at 1:38 am #1794494Monkeys and MountainsWhat 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,
May 23, 2021 at 8:50 am #1795068TomLead DeveloperLead DeveloperYou 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 π
May 23, 2021 at 1:26 pm #1795228Monkeys and MountainsThat fixed it. :). Thanks so much for your help. I really appreciate it.
May 24, 2021 at 9:08 am #1796294TomLead DeveloperLead DeveloperNo problem!
-
AuthorPosts
- You must be logged in to reply to this topic.