Tagged: Burger Menu, search form
-
AuthorPosts
-
December 22, 2020 at 7:28 pm #1269382
Hello there. I am trying to add the search icon (with its associated search form) right next to the burger menu icon. I have found the function
avia_append_burger_menu
and have redefined it in my child theme. I can confirm the search icon’s html is added properly by sending it to debug.log yet it never shows up next to the burger menu icon. Moreover, it seems it’s added to the inside of the burger menu instead of right next to the burger menu icon. I have no idea what is going on.Here is the redefined
avia_append_burger_menu
function:/* Append the burger menu */ if(!function_exists('avia_append_burger_menu')) { //first append search item to main menu add_filter( 'wp_nav_menu_items', 'avia_append_burger_menu', 9998, 2 ); add_filter( 'avf_fallback_menu_items', 'avia_append_burger_menu', 9998, 2 ); function avia_append_burger_menu ( $items , $args ) { global $avia_config; $location = ( is_object( $args ) && isset( $args->theme_location ) ) ? $args->theme_location : ''; $original_location = isset( $avia_config['current_menu_location_output'] ) ? $avia_config['current_menu_location_output'] : ''; /** * Allow compatibility with plugins that change menu or third party plugins to manpulate the location * * @used_by Enfold config-menu-exchange\config.php 10 * @since 4.1.3 */ $location = apply_filters( 'avf_append_burger_menu_location', $location, $original_location, $items , $args ); if( ( is_object( $args ) && ( $location == 'avia' ) ) || ( is_string( $args ) && ( $args == "fallback_menu" ) ) ) { $class = avia_get_option('burger_size'); $items .= '<li class="av-burger-menu-main menu-item-avia-special '.$class.'"> <a href="#"> <span class="av-hamburger av-hamburger--spin av-js-hamburger"> <span class="av-hamburger-box"> <span class="av-hamburger-inner"></span> <strong>'.__('Menu','avia_framework').'</strong> </span> </span> </a> </li>'; // Utilisation de la fonction maison définie ci-haut. $items = avia_append_search_nav( $items, $args ); } return $items; } }
Since it uses our redefined
avia_append_search_nav
function, here it is as well:if(!function_exists('avia_append_search_nav')) { // Remove from its usual position remove_filter( 'wp_nav_menu_items', 'avia_append_search_nav', 10, 2 ); remove_filter( 'avf_fallback_menu_items', 'avia_append_search_nav', 10, 2 ); function avia_append_search_nav ( $items, $args = null ) { global $avia_config; ob_start(); get_search_form(); $form = htmlspecialchars(ob_get_clean()) ; $items .= '<li id="menu-item-search" class="menu-item menu-item-search-dropdown"> <a href="?s=" rel="nofollow"><span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span></a> </li>'; return $items; } }
Any help is appreciated. Thanks!
- This topic was modified 3 years, 11 months ago by Technoh. Reason: Again, better code formatting
December 26, 2020 at 11:53 pm #1269839Hey Technoh,
Sorry for the late reply, thanks for sharing your code, but the theme already places the search icon and form next to the burger menu when it is enabled:
at Enfold Theme Options > Main Menu > Append search icon to main menu
So perhaps because you have this option disabled, when you try adding it though your theme edits the same classes are used and it doesn’t show due to the css from the theme option.
Please try using the theme option instead.Best regards,
MikeJanuary 4, 2021 at 9:24 pm #1270249Hello Mike,
Thanks for replying. I checked the theme settings and the option is active. The search box is added to the social icons section and this section was hidden. I have modified the CSS code and the search icon is now displayed correctly. However, when clicking on it (ON MOBILE ONLY) the search bar is not displayed properly and it becomes extremely difficult to search. The search button is available but clicking where the text input should be actually clicks on the logo, bringing the user to the site’s front page, or on the burger menu, opening it.
Could you look at the site and give me the appropriate CSS code in order to display the search box in its correct position?
Thanks!
January 5, 2021 at 1:26 pm #1270391Hi,
Thanks for the feedback, I see for mobile the social icons and the search icon are not displaying, are you still using your custom functions above? Please try removing this and update the Enfold theme, as you are using version 4.6.2 which is quite old now and contained many errors that have now been corrected in the current version 4.7.6.4Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.