: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
'mobile_options' => true,
'menu_icon_font_size' => array(
'label' => esc_html__( 'Hamburger Menu Icon Font Size', 'et_builder' ),
'description' => esc_html__( 'Control the size of the icon by increasing or decreasing the font size.', 'et_builder' ),
'option_category' => 'font_option',
'tab_slug' => 'advanced',
'toggle_slug' => 'icon_settings',
'allowed_units' => et_builder_get_acceptable_css_string_values( 'font-size' ),
'range_settings' => array(
'mobile_options' => true,
public function get_transition_fields_css_props() {
$menu_slug = self::$menu_slug;
$fields = parent::get_transition_fields_css_props();
$fields['active_link_color'] = array( 'color' => "%%order_class%%.{$menu_slug} ul li.current-menu-item a" );
$fields['dropdown_menu_text_color'] = array( 'color' => "%%order_class%%.{$menu_slug} .nav li ul a" );
$fields['dropdown_menu_active_link_color'] = array( 'color' => "%%order_class%%.{$menu_slug} .nav li ul li.current-menu-item a" );
$fields['logo_max_width'] = array( 'max-width' => '%%order_class%% .et_pb_menu_inner_container > .et_pb_menu__logo-wrap .et_pb_menu__logo, %%order_class%% .et_pb_menu__logo-slot' );
$fields['logo_max_height'] = array( 'max-height' => '%%order_class%% .et_pb_menu_inner_container > .et_pb_menu__logo-wrap .et_pb_menu__logo img, %%order_class%% .et_pb_menu__logo-slot .et_pb_menu__logo-wrap img' );
$fields['menu_icon_color'] = array(
'color' => '%%order_class%% .mobile_menu_bar:before',
$fields['search_icon_color'] = array(
'color' => '%%order_class%% .et_pb_menu__icon.et_pb_menu__search-button, %%order_class%% .et_pb_menu__icon.et_pb_menu__close-search-button',
$fields['cart_icon_color'] = array(
'color' => '%%order_class%% .et_pb_menu__icon.et_pb_menu__cart-button',
$fields['menu_icon_font_size'] = array(
'font-size' => '%%order_class%% .mobile_menu_bar:before',
$fields['search_icon_font_size'] = array(
'font-size' => '%%order_class%% .et_pb_menu__icon.et_pb_menu__search-button, %%order_class%% .et_pb_menu__icon.et_pb_menu__close-search-button',
$fields['cart_icon_font_size'] = array(
'font-size' => '%%order_class%% .et_pb_menu__icon.et_pb_menu__cart-button',
* Add the class with page ID to menu item so it can be easily found by ID in Frontend Builder
* @return menu item object
static function modify_fullwidth_menu_item( $menu_item ) {
// Since PHP 7.1 silent conversion to array is no longer supported.
$menu_item->classes = (array) $menu_item->classes;
if ( esc_url( home_url( '/' ) ) === $menu_item->url ) {
$fw_menu_custom_class = 'et_pb_menu_page_id-home';
$fw_menu_custom_class = 'et_pb_menu_page_id-' . $menu_item->object_id;
$menu_item->classes[] = $fw_menu_custom_class;
* Get menu markup for menu module
* @return string of menu markup
static function get_fullwidth_menu( $args = array() ) {
$is_fullwidth = 'et_pb_fullwidth_menu' === self::$menu_slug;
'submenu_direction' => '',
// modify the menu item to include the required data
add_filter( 'wp_setup_nav_menu_item', array( 'ET_Builder_Module_Menu', 'modify_fullwidth_menu_item' ) );
$args = wp_parse_args( $args, $defaults );
$menu = '<nav class="et-menu-nav">';
$menuClass = 'et-menu nav';
$menu = '<nav class="et-menu-nav fullwidth-menu-nav">';
$menuClass = 'et-menu fullwidth-menu nav';
// divi_disable_toptier option available in Divi theme only
if ( ! et_is_builder_plugin_active() && 'on' === et_get_option( 'divi_disable_toptier' ) ) {
$menuClass .= ' et_disable_top_tier';
$menuClass .= ( '' !== $args['submenu_direction'] ? sprintf( ' %s', esc_attr( $args['submenu_direction'] ) ) : '' );
'theme_location' => 'primary-menu',
'menu_class' => $menuClass,
if ( '' !== $args['menu_id'] ) {
$menu_args['menu'] = (int) $args['menu_id'];
$filter = $is_fullwidth ? 'et_fullwidth_menu_args' : 'et_menu_args';
$primaryNav = wp_nav_menu( apply_filters( $filter, $menu_args ) );
if ( empty( $primaryNav ) ) {
( ! et_is_builder_plugin_active() && 'on' === et_get_option( 'divi_home_link' )
? sprintf( '<li%1$s><a href="%2$s">%3$s</a></li>',
( is_home() ? ' class="current_page_item"' : '' ),
esc_url( home_url( '/' ) ),
esc_html__( 'Home', 'et_builder' )
// @todo: check if Menu module works fine with no menu selected in settings
if ( et_is_builder_plugin_active() ) {
show_page_menu( $menuClass, false, false );
show_categories_menu( $menuClass, false );
$menu .= ob_get_contents();
remove_filter( 'wp_setup_nav_menu_item', array( 'ET_Builder_Module_Menu', 'modify_fullwidth_menu_item' ) );
* @param string $render_slug
protected function apply_logo_styles( $render_slug ) {
$max_width_selector = '%%order_class%% .et_pb_menu_inner_container > .et_pb_menu__logo-wrap .et_pb_menu__logo, %%order_class%% .et_pb_menu__logo-slot';
$max_width_values = et_pb_responsive_options()->get_property_values( $this->props, 'logo_max_width' );
$max_width_hover = $this->get_hover_value( 'logo_max_width' );
$max_height_selector = '%%order_class%% .et_pb_menu_inner_container > .et_pb_menu__logo-wrap .et_pb_menu__logo img, %%order_class%% .et_pb_menu__logo-slot .et_pb_menu__logo-wrap img';
$max_height_values = et_pb_responsive_options()->get_property_values( $this->props, 'logo_max_height' );
$max_height_hover = $this->get_hover_value( 'logo_max_height' );
// Remove default opacity if hover color is enabled for links.
if ( et_builder_is_hover_enabled( 'menu_text_color', $this->props ) ) {
ET_Builder_Element::set_style( $render_slug, array(
'selector' => "{$this->main_css_element} nav > ul > li > a:hover",
'declaration' => 'opacity: 1;',
if ( et_builder_is_hover_enabled( 'dropdown_menu_text_color', $this->props ) ) {
ET_Builder_Element::set_style( $render_slug, array(
'selector' => "{$this->main_css_element} nav > ul > li li a:hover",
'declaration' => 'opacity: 1;',
if ( et_builder_is_hover_enabled( 'dropdown_menu_active_link_color', $this->props ) ) {
ET_Builder_Element::set_style( $render_slug, array(
'selector' => "{$this->main_css_element} nav > ul > li li.current-menu-item a:hover",
'declaration' => 'opacity: 1;',
et_pb_responsive_options()->generate_responsive_css( $max_width_values, $max_width_selector, 'max-width', $render_slug );
if ( et_builder_is_hover_enabled( 'logo_max_width', $this->props ) ) {
ET_Builder_Element::set_style( $render_slug, array(
'selector' => et_pb_hover_options()->add_hover_to_selectors( $max_width_selector ),
'declaration' => sprintf(
esc_html( $max_width_hover )
et_pb_responsive_options()->generate_responsive_css( $max_height_values, $max_height_selector, 'max-height', $render_slug );
if ( et_builder_is_hover_enabled( 'logo_max_height', $this->props ) ) {
ET_Builder_Element::set_style( $render_slug, array(
'selector' => et_pb_hover_options()->add_hover_to_selectors( $max_height_selector ),
'declaration' => sprintf(
esc_html( $max_height_hover )
* Determine if icon is disabled.
protected function is_icon_enabled( $icon ) {
$icon_show_prop = "show_{$icon}_icon";
$values = array_values( et_pb_responsive_options()->get_property_values( $this->props, $icon_show_prop, 'off', true ) );
$values[] = $this->get_hover_value( $icon_show_prop );
return false !== strpos( join( $values ), 'on' );
* @param string $render_slug
* @param string $selector
protected function apply_icon_styles( $render_slug, $icon, $selector ) {
$font_size_prop = "{$icon}_icon_font_size";
$color_prop = "{$icon}_icon_color";
if ( 'menu' !== $icon && $this->is_icon_enabled( $icon ) ) {
$icon_show_prop = "show_{$icon}_icon";
if ( et_pb_responsive_options()->is_responsive_enabled( $this->props, $icon_show_prop ) ) {
$values = et_pb_responsive_options()->get_property_values( $this->props, $icon_show_prop, 'off', true );
$values = json_decode( strtr( json_encode( $values ), $replacements ) );
et_pb_responsive_options()->generate_responsive_css( $values, $selector, 'display', $render_slug, '', '' );
if ( et_builder_is_hover_enabled( $icon_show_prop, $this->props ) ) {
$hover = ( 'on' === $this->get_hover_value( $icon_show_prop ) ) ? 'flex' : 'none';
ET_Builder_Element::set_style( $render_slug, array(
'selector' => str_replace( '%%order_class%%', '%%order_class%%:hover', $selector ),
'declaration' => sprintf(
$font_size_values = et_pb_responsive_options()->get_property_values( $this->props, $font_size_prop );
$font_size_hover = $this->get_hover_value( $font_size_prop );
$color_values = et_pb_responsive_options()->get_property_values( $this->props, $color_prop );
$color_hover = $this->get_hover_value( $color_prop );
et_pb_responsive_options()->generate_responsive_css( $font_size_values, $selector, 'font-size', $render_slug );
if ( et_builder_is_hover_enabled( $font_size_prop, $this->props ) ) {
ET_Builder_Element::set_style( $render_slug, array(
'selector' => et_pb_hover_options()->add_hover_to_selectors( $selector ),
'declaration' => sprintf(
esc_html( $font_size_hover )
et_pb_responsive_options()->generate_responsive_css( $color_values, $selector, 'color', $render_slug, '', 'color' );
if ( et_builder_is_hover_enabled( $color_prop, $this->props ) ) {
ET_Builder_Element::set_style( $render_slug, array(
'selector' => et_pb_hover_options()->add_hover_to_selectors( $selector ),
'declaration' => sprintf(
protected function render_logo() {
$multi_view = et_pb_multi_view_options( $this );
$logo_alt = $this->props['logo_alt'];
$logo_url = $this->props['logo_url'];
$logo_url_new_window = $this->props['logo_url_new_window'];
$logo_html = $multi_view->render_element( array(
'hover_selector' => '%%order_class%% .et_pb_menu__logo-wrap .et_pb_menu__logo img',
if ( empty( $logo_html ) ) {
if ( ! empty( $logo_url ) ) {
$target = ( 'on' === $logo_url_new_window ) ? 'target="_blank"' : '';
'<a href="%1$s" %2$s>%3$s</a>',
et_core_intentionally_unescaped( $target, 'fixed_string' ),
et_core_esc_previously( $logo_html )
'<div class="et_pb_menu__logo-wrap">
<div class="et_pb_menu__logo">
protected function render_cart() {
if ( ! $this->is_icon_enabled( 'cart' ) ) {
if ( ! class_exists( 'woocommerce' ) || ! WC()->cart ) {
$url = function_exists( 'wc_get_cart_url' ) ? wc_get_cart_url() : WC()->cart->get_cart_url();
'<a href="%1$s" class="et_pb_menu__icon et_pb_menu__cart-button"></a>',
* Filter the cart icon output.
* @param string $menu_slug
return apply_filters( 'et_pb_menu_module_cart_output', $output, self::$menu_slug );
protected function render_search() {
if ( ! $this->is_icon_enabled( 'search' ) ) {
return '<button type="button" class="et_pb_menu__icon et_pb_menu__search-button"></button>';
protected function render_search_form() {
if ( ! $this->is_icon_enabled( 'search' ) ) {
'<div class="et_pb_menu__search-container et_pb_menu__search-container--disabled">
<div class="et_pb_menu__search">
<form role="search" method="get" class="et_pb_menu__search-form" action="%1$s">
<input type="search" class="et_pb_menu__search-input" placeholder="%2$s" name="s" title="%3$s" />
<button type="button" class="et_pb_menu__icon et_pb_menu__close-search-button"></button>
esc_url( home_url( '/' ) ),
esc_attr__( 'Search …', 'et_builder' ),
esc_attr__( 'Search for:', 'et_builder' )
function render( $attrs, $content = null, $render_slug ) {
$menu_slug = self::$menu_slug;
$background_color = $this->props['background_color'];
$menu_id = $this->props['menu_id'];
$submenu_direction = $this->props['submenu_direction'];
$menu_style = $this->props['menu_style'];
$dropdown_menu_bg_color = $this->props['dropdown_menu_bg_color'];
$dropdown_menu_bg_color_hover = $this->get_hover_value( 'dropdown_menu_bg_color' );
$dropdown_menu_text_color = $this->props['dropdown_menu_text_color'];
$dropdown_menu_text_color_hover = $this->get_hover_value( 'dropdown_menu_text_color' );
$dropdown_menu_active_link_color = et_()->array_get( $this->props, 'dropdown_menu_active_link_color', '' );
$dropdown_menu_active_link_color_hover = $this->get_hover_value( 'dropdown_menu_active_link_color' );
$dropdown_menu_animation = $this->props['dropdown_menu_animation'];
$active_link_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'active_link_color' );
$active_link_color_hover = $this->get_hover_value( 'active_link_color' );
$dropdown_menu_line_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'dropdown_menu_line_color' );
$dropdown_menu_line_color_hover = $this->get_hover_value( 'dropdown_menu_line_color' );
$mobile_menu_text_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'mobile_menu_text_color' );
$mobile_menu_text_color_hover = $this->get_hover_value( 'mobile_menu_text_color' );
$background_layout = $this->props['background_layout'];
$background_layout_hover = et_pb_hover_options()->get_value( 'background_layout', $this->props, 'light' );
$background_layout_hover_enabled = et_pb_hover_options()->is_enabled( 'background_layout', $this->props );
$background_layout_values = et_pb_responsive_options()->get_property_values( $this->props, 'background_layout' );
$background_layout_tablet = isset( $background_layout_values['tablet'] ) ? $background_layout_values['tablet'] : '';
$background_layout_phone = isset( $background_layout_values['phone'] ) ? $background_layout_values['phone'] : '';
$mobile_menu_bg_color = $this->props['mobile_menu_bg_color'];
$mobile_menu_bg_color_hover = $this->get_hover_value( 'mobile_menu_bg_color' );
$mobile_menu_bg_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'mobile_menu_bg_color' );
$mobile_menu_bg_color_tablet = isset( $mobile_menu_bg_color_values['tablet'] ) ? $mobile_menu_bg_color_values['tablet'] : '';
$mobile_menu_bg_color_phone = isset( $mobile_menu_bg_color_values['phone'] ) ? $mobile_menu_bg_color_values['phone'] : '';
$video_background = $this->video_background();
$parallax_image_background = $this->get_parallax_image_background();
$menu = self::get_fullwidth_menu( array(