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

This topic has 17 replies, 4 voices, and was last updated 3 years ago by Elise Noromit.

Viewing 18 posts - 1 through 18 (of 18 total)

Author

Posts
March 2, 2021 at 8:34 pm #270445

maverick10
Participant

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

March 2, 2021 at 9:57 pm #270470
Elise Noromit
Member
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
May 7, 2021 at 2:01 pm #290568

maverick10
Participant

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

May 8, 2021 at 3:20 pm #290845
Elise Noromit
Member
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
May 8, 2021 at 4:40 pm #290859

LivaR
Participant

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.

May 9, 2021 at 10:06 am #290981

Elise Noromit
Member

Hello,

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

Regards Regards

March 14, 2022 at 3:10 pm #360701

TylonHH
Participant

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?

March 15, 2022 at 1:25 am #360790

Elise Noromit
Member

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

March 15, 2022 at 9:57 pm #361136

TylonHH
Participant

here we go

March 16, 2022 at 8:58 pm #361445

Elise Noromit
Member

Hello

Please provide the correct log in URL.

Best Regards

March 16, 2022 at 9:18 pm #361447

TylonHH
Participant

Sorry for missing url

March 17, 2022 at 4:41 pm #361772

blissguy
Participant

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

March 18, 2022 at 11:05 am #361996

Elise Noromit
Member

Hello,

We will add the option in the nearest update.

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

Best Regards

March 24, 2022 at 10:15 am #363617
pooltechdk
Participant
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.
March 24, 2022 at 12:27 pm #363685

TylonHH
Participant

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

March 25, 2022 at 10:26 am #363979

Elise Noromit
Member

Hello,

This feature would be added in 6.4 version.

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

Best Regards

April 13, 2022 at 6:08 am #368116
pooltechdk
Participant
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?
April 14, 2022 at 2:00 am #368330

Elise Noromit
Member

Hello,

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

Best Regards
Author

Posts