- This topic has 9 replies, 4 voices, and was last updated 3 years, 2 months ago by David.
-
AuthorPosts
-
February 1, 2021 at 2:15 am #1641288Alex
I found the following code to display search icon on secondary navigation bar. Unfortunately, when switching to flexbox, which is my current mode, the icon shows up on both main and secondary bars. Could you please help to remove it from the main bar?
/*Search icon in secondary menu*/ add_action( 'after_setup_theme', function() { remove_action( 'generate_inside_navigation', 'generate_navigation_search' ); remove_action( 'generate_inside_navigation', 'generate_mobile_menu_search_icon' ); add_action( 'generate_inside_secondary_navigation', 'generate_navigation_search' ); add_action( 'generate_inside_secondary_navigation', 'generate_mobile_menu_search_icon' ); remove_filter( 'wp_nav_menu_items', 'generate_menu_search_icon', 10, 2 ); } ); add_filter( 'wp_nav_menu_items', function( $nav, $args ) { $generate_settings = wp_parse_args( get_option( 'generate_settings', array() ), generate_get_defaults() ); if ( 'enable' !== $generate_settings['nav_search'] ) { return $nav; } if ( 'secondary' === $args->theme_location ) { $icon = generate_get_svg_icon( 'search', true ); return $nav . '<li class="search-item" title="' . esc_attr_x( 'Search', 'submit button', 'generatepress' ) . '"><a href="#">' . $icon . '<span class="screen-reader-text">' . _x( 'Search', 'submit button', 'generatepress' ) . '</span></a></li>'; } return $nav; }, 10, 2 );
February 1, 2021 at 10:03 am #1641900TomLead DeveloperLead DeveloperHi there,
This might help: https://docs.generatepress.com/article/navigation-search/#use-navigation-search-in-secondary-navigation
Let us know π
February 1, 2021 at 12:26 pm #1642032AlexHi Tom! Yes, it works perfectly. But when the icon is clicked the search bar appears behind the main navigation bar and I can see only the very top of the input text.
February 1, 2021 at 6:42 pm #1642304LeoStaffCustomer SupportHi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know π
February 1, 2021 at 11:42 pm #1642464AlexYes, Leo.
February 2, 2021 at 6:30 am #1642870DavidStaffCustomer SupportHi there,
this CSS to stop the duplicate form from appearing:
#mobile-header .navigation-search.nav-search-active { display: none; }
Then CSS to moke sure the form is in front of the header:
.navigation-search.nav-search-active { z-index: 10000; }
Then you need to edit your CSS that is increasing the search input font size ie. this:
.navigation-search input[type="search"], .navigation-search input[type="search"]:focus { background: #fff; color: #4d4d4d; text-align: center; font-size: 50px; font-style: bold; height: 100px; /* include a height value thats greater than font size */ }
And give it a height value.
February 8, 2021 at 11:36 pm #1651226AlexThanks, David! The code works just fine, but when the search bar is active, there is no visible cross icon to escape it.
February 9, 2021 at 2:38 am #1651390DavidStaffCustomer SupportAdd this CSS:
.search-form.navigation-search.nav-search-active { top: 40px; }
And in the CSS above you can adjust the forms height:
height: 100px; /* include a height value thats greater than font size */
February 9, 2021 at 3:37 am #1651444AlexThat’s fine, David! You guys and your great team are real coding Jedi π
February 9, 2021 at 5:14 am #1651547DavidStaffCustomer SupportGlad to be of help π
-
AuthorPosts
- You must be logged in to reply to this topic.