Sub Menu Element – remove bullets and add own icon (mobile with toggle switch)

Hey jhieronimus,

Thank you for the inquiry.

The site is asking for another authentication, probably the htaccess. Please include the htaccess authentication in the private field so that we can login and check the site.

You can adjust the style of the burger menu in the Enfold > Main Menu > Burger/Mobile Menu panel. Set the Menu Overlay Style to minimal or the third option if you want to remove the lines.

Best regards,
Ismael

Hi,

Thanks however htaccess authentication is not working for me. Could you please check it once again? :)

Best regards,
Yigit

Hi,

Thanks for the update. The new details are not working either, please check that they are working before sending them.

Best regards,
Rikard

Hi,

Thank you for the update.

1.) We added the following css code to remove the menu indicator or the arrows.

.mega-indicator {
	display: none !important;
}

2.) And this one to remove the lines in the mobile menu.

.av_minimal_header .main_menu #mega-menu-wrap-avia #mega-menu-avia li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item a {
	border: 0;
}

3.) This is not possible out of the box but you should be able to use css to change the style of the mobile menu icon. Example:

#mega-menu-wrap-avia .mega-menu-toggle .mega-toggle-block-3 .mega-toggle-animated-box::before {
	content: "\f411" !important;
	font-size: 30px;
	top: -20px;
	position: relative;
}

.mega-toggle-animated-inner {
	display: none !important;
}

Best regards,
Ismael

Hi,

Thank you for following up.

We cannot find any full width sub menu in the page. Where did you add it? And please post a screenshot of the changes that you would like to do for the sub menu.

Best regards,
Ismael

Hi,

Thank you for the info.

To remove the borders and arrows, you can use this css code.

.responsive #top .av-menu-mobile-active .av-subnav-menu  li {
    border: none;
}

.responsive #top .av-subnav-menu .avia-bullet {
    display: none;
}

However, in order to change the icon, you may need to modify the enfold/config-templatebuilder/avia-shortcodes/menu/menu.php file and add the svg element around line 624.

$mobile_button = $mobile == 'active' ? "<a href='#' class='mobile_menu_toggle' " . av_icon_string( 'mobile_menu' ) . "><span class='av-current-placeholder'>" . __( 'Menu', 'avia_framework' ) . '</span></a>' : '';
			if( ! empty( $mobile_button ) && ! empty( $mobile_submenu ) && $mobile_submenu != 'disabled' )
			{
				$submenu_hidden = 'av-submenu-hidden';
			}

You can change it via css but you have to register the genericons package or font files.

// https://wpsites.net/web-design/installing-genericons/

Best regards,
Ismael