# footer problem on mobile terminals

**URL:** <https://community.hubspot.com/t/footer-problem-on-mobile-terminals/19746>\
**Category:** CMS Development\
**Tags:** design-manager, css, javascript\
**Created:** [March 31, 2020, 8:47am UTC](https://community.hubspot.com/t/footer-problem-on-mobile-terminals/19746 "2020-03-31T08:47:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![JXLI012](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jxli012/32/92090_2.png) [@JXLI012](https://community.hubspot.com/u/JXLI012)\
**Post date:** [March 31, 2020, 8:47am UTC](https://community.hubspot.com/t/footer-problem-on-mobile-terminals/19746/1 "2020-03-31T08:47:49Z")

</div>

Hello everybody,

I have some problems regarding footer menu which only happen when open it on mobiles.

1. when trying to click the button and the arrow on the footer, such as the “products”, “news” etc., there is no reaction to the click, which means people cannot be redirected to the pages linked with “products” and “news” etc.

 ![4.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/3/2370a077abe4996126451af20033d173029f4d60.jpeg)

2. I made a Japanese version for the footer. However, when choose the language “Japanese”, the translation dose not show in the footer menu.

As for the first problem, the Hubspot supporter suggest me add the functionaility in:

1. CSS/bootsrap

2. Javascript/Jquery

Here are the screenshots of my footer`s CSS and Javascript.

 ![css1.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/2/d2bfcc8b155079fab5ae7731cfd515a95ecdac9e.png)  
css1  
 ![css2.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/b/1b051caead5c6fb563b15c90a8cd998e5d9f1ae7.png)  
css2  
 ![css3.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/3/b38365376c1230ca5f88d8509faeda5c257aa0cf.png)  
css3  
 ![java.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/1/71181c933da5059d45d72c891476df9698057b4f.png)  
javascript

But I do not know programming. Could you please help me to solve the above problems?

Thank you very much for your answers!

Li

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [March 31, 2020, 4:02pm UTC](https://community.hubspot.com/t/footer-problem-on-mobile-terminals/19746/2 "2020-03-31T16:02:20Z")

</div>

Hey @JXLI012

Could you provide a URL for us to test. We should be able to help you get this done rather quickly with that info.

---

<div class="post-metadata">

**Author:** ![JXLI012](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jxli012/32/92090_2.png) [@JXLI012](https://community.hubspot.com/u/JXLI012)\
**Post date:** [March 31, 2020, 4:07pm UTC](https://community.hubspot.com/t/footer-problem-on-mobile-terminals/19746/3 "2020-03-31T16:07:25Z")

</div>

Hello Kevin,

Thank you for the reply. The URL shows as follows. Please find it for your reference.

> **[WALKOLUTION® ⎜The Manual Treadmill Desk](https://walkolution.com/)**
>
> Meet the revolutionary and award winning treadmill desks. Whisper silent. Powered only by body weight. Worldwide shipping. Made in Germany.

Best

Li

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [March 31, 2020, 4:32pm UTC](https://community.hubspot.com/t/footer-problem-on-mobile-terminals/19746/4 "2020-03-31T16:32:45Z")

</div>

Hey @JXLI012

At a glance I think you’re missing some JS.

Try adding this to the JS section of the module:

```auto
$('.foot-nav-title').on('click',function() {
 var $this = $(this), child = $(this).next('.hs_cos_wrapper_type_simple_menu').find('.flyouts');
 if(!child.is(':visible')) { $this.toggleClass('active');
 child.slideDown();
 } else { $this.toggleClass('active');
 child.slideUp();
 }
});

```

---

<div class="post-metadata">

**Author:** ![JXLI012](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jxli012/32/92090_2.png) [@JXLI012](https://community.hubspot.com/u/JXLI012)\
**Post date:** [March 31, 2020, 4:44pm UTC](https://community.hubspot.com/t/footer-problem-on-mobile-terminals/19746/5 "2020-03-31T16:44:31Z")

</div>

Thank you so much for the answer and coding.

Do you mean anywhere in the JS section to add the codes you gave me? or must insert in some specific paragraphs? Sorry for this too basic question, since I really have zero experience in programming.

Li

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [March 31, 2020, 4:47pm UTC](https://community.hubspot.com/t/footer-problem-on-mobile-terminals/19746/6 "2020-03-31T16:47:17Z")

</div>

Paste it in the panel shown below after the existing JS:

 ![java.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/1/71181c933da5059d45d72c891476df9698057b4f.png)  
javascript

---

<div class="post-metadata">

**Author:** ![JXLI012](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jxli012/32/92090_2.png) [@JXLI012](https://community.hubspot.com/u/JXLI012)\
**Post date:** [March 31, 2020, 5:04pm UTC](https://community.hubspot.com/t/footer-problem-on-mobile-terminals/19746/7 "2020-03-31T17:04:28Z")

</div>

Thank you for your generous help! It works perfectly!

Have a nice day!

Li