HOW CAN I CREATE A CLOSE BUTTON IN THE MOBILE MENU AT THE TOP?

HOW CAN I CREATE A CLOSE BUTTON IN THE MOBILE MENU AT THE TOP?

I HAVE THIS CODE THAT I HAVE COPYED INTO CUSTOM JS AND IN $(document).ready() BUT IT DOESN’T WORK:

jQuery(‘.mobile-nav .close-side-widget’).on(‘click’, function(){
jQuery(‘.mobile-nav’).removeClass(‘act-mobile-menu’);
jQuery(‘.woodmart-close-side’).removeClass(‘woodmart-close-side-opened’);
jQuery(‘.mobile-nav .searchform input[type=text]’).blur();
});

THIS CODE NOT WORKS
I NEED THIS VERY URGENTLY FOR MY CUSTOMER

THANK YOU VERY MUCH

Hello,

To add the “Close” button there, add the following code to the file woodmart/inc/template-tags.php http://prntscr.com/uxid83

echo '<div class="widget-heading"><a href="#" class="close-side-widget wd-cross-button wd-with-text-left">Close</a></div>';

and put this code to the Custom JS section on document ready in Theme Settings

jQuery('.mobile-nav .close-side-widget').on('click', function(){
	jQuery('.mobile-nav').removeClass('act-mobile-menu');
	jQuery('.woodmart-close-side').removeClass('woodmart-close-side-opened');
	jQuery('.mobile-nav .searchform input[type=text]').blur();
});

Best Regards

Please this is urgent!
The code that you have given me in the previous message to include a close button on mobile devices no longer works with the new woodmart version that you have created.

The button does not close the menu and the close cross does not appear, but only the text appears

Look here:
https://ventanaalsur.com/ellangostinodesanlucar/

Can you give me the new html and Js code?

Thank you very much

Hello,

Sorry for the delay.

Please replace the code in this file woodmart/inc/template-tags.php http://prntscr.com/uxid83

for this one:

echo '<div class="widget-heading"><div class="close-side-widget wd-action-btn wd-style-text wd-cross-icon"><a href="#" rel="noffollow">close</a></div></div>';

Also, replace this code in custom JS section on document ready in Theme Settings:

jQuery('.mobile-nav .close-side-widget').on('click', function(){
        jQuery('.mobile-nav').removeClass('wd-opened');
        jQuery('.wd-close-side').removeClass('wd-close-side-opened');
        jQuery('.mobile-nav .searchform input[type=text]').blur();
});

Best Regards

Hi! I would like to add a close button as well, but I don’t understand where I can find this file woodmart/inc/template-tags.php in order to change the html code?

I know where to find Theme Settings and how to add code JS code.

Hello,

Please make the full backup of your site, provide the FTP access and site admin access into the private area.

Regards Regards

Hello,
is the file moved to

wp-content/themes/woodmart/inc/template-tags/template-tags.php

There I see

woodmart_enqueue_js_script( ‘mobile-navigation’ );

echo ‘<div class=”mobile-nav wd-side-hidden’ . esc_attr( $nav_classes ) . ‘”>’;

if ( $search_form ) {
woodmart_search_form( $search_args );
}

$tab_classes .= woodmart_get_old_classes( ‘ mobile-menu-tab mobile-nav-tabs’ );

if ( $mobile_categories ) {
?>

What shall I replace with what?

So, why is this so difficult to add an option within the frontend?

Hello,

Please make the full backup of your site, provide the FTP access and site admin access into the private area. We will help to do that.

Regards Regards

here we go

Hello

Please provide the correct log in URL.

Best Regards

Sorry for missing url

This should be a native feature. I don’t know why i will have to be messing around with code just to add a close button

Hello,

We will add the option in the nearest update.

If you have any questions please feel free to contact us.

Best Regards

This works like a charm.

However, people might need to adjust the button size.
I used this custom css to have the button display larger:

.close-side-widget {
	height: 50px;
	display: flex;
        align-items: center;
        justify-content: center;
	position: relative;
}
.close-side-widget a {
	position: absolute !important;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

My question though.
Will the custom code added to template-tags.php be overwritten during theme update?
I tried to copy the structure path to child-theme, but didn’t work.

Attachments:

You must be logged in to view attached files.

Please check or when will the update come?
https://xtemos.com/forums/topic/how-can-i-create-a-close-button-in-the-mobile-menu-at-the-top/#post-361447

Hello,

This feature would be added in 6.4 version.

If you have any questions please feel free to contact us.

Best Regards

I see you added a close button to the new WoodMart theme update.
However, the close menu button is not visible on my end. Simply doesn’t appear.

So i will have to reuse your code provided here:

echo '<div class="widget-heading"><div class="close-side-widget wd-action-btn wd-style-text wd-cross-icon"><a href="#" rel="noffollow">close</a></div></div>';

jQuery('.mobile-nav .close-side-widget').on('click', function(){
        jQuery('.mobile-nav').removeClass('wd-opened');
        jQuery('.wd-close-side').removeClass('wd-close-side-opened');
        jQuery('.mobile-nav .searchform input[type=text]').blur();
});

Is there any way I can include this in my child-theme so I don’t have to always update woodmart/inc/template-tags.php after each theme update?

Hello,

I have checked the functionality and it works. Could you delete the code and provide the site admin access?

Best Regards

[Author]

Posts