Hamburger Menu (mobile) not working a specific page

Site URL: http://www.lesliefang.com/pawalong

I'm not sure why but the hamburger menu is not working on the page below? When I click on the menu instead a line appears at the bottom of the header. 

I try a few CSS code but had no success. All the other pages work fine except this one. I'm not sure what happen on this page. Any tip or code I can do to fix this? Thank you! 

 

www.lesliefang.com/pawalong

 

Edited June 3, 2022 by lfang2

Update: I still can't figure out what the issue is. 

I can't find the cause. But you can consider forcing desktop menu on mobile, so the header layout will be: Left logo - Right menu items (Home, Portfolio, About Me).

If you like this idea, we can give the code

@tuanphan Hi Tuan, How odd I didn't get a notification for your response. Yes please if you can provide the code that would be great.  I rather have desktop mobile that works than one thats not working! :x 

Thank you so much! <3 

12 hours ago, lfang2 said:

@tuanphan Hi Tuan, How odd I didn't get a notification for your response. Yes please if you can provide the code that would be great.  I rather have desktop mobile that works than one thats not working! :x 

Thank you so much! ❤️

Add to Design > Custom CSS
 

@media screen and (max-width:991px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
.showOnDesktop .header-actions-action.header-actions-action--cart {
    display: none;
}
    .header-title {
        width: 10% !Important;
        flex: 10% !Important;
    }
}

 

12 hours ago, tuanphan said:

Add to Design > Custom CSS
 

@media screen and (max-width:991px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
.showOnDesktop .header-actions-action.header-actions-action--cart {
    display: none;
}
    .header-title {
        width: 10% !Important;
        flex: 10% !Important;
    }
}

 

@tuanphan :x I'm not sure what is going on with my page but the forced menu is not working. 

Can you add & keep the code in Custom CSS?

18 hours ago, tuanphan said:

Can you add & keep the code in Custom CSS?

Oh sorry I only removed it was going to play around with it. I'll add back in again right now. 

@tuanphan Done. 

It looks like you edited something in my code, or the some other code made my code changed. Here the code I see in my browser

@media only screen and (max-width: 640px) and screen and (max-width:991px) {
    .header-display-desktop {
        display:flex !important
    }

    .header-display-mobile {
        display: none
    }

    .header-burger {
        display: none
    }

    .header-nav {
        display: flex !important
    }

    .header-nav {
        display: flex !important;
        flex: 70% !important;
        justify-content: flex-end
    }

    .showOnDesktop .header-actions-action.header-actions-action--cart {
        display: none
    }

    .header-title {
        width: 10% !Important;
        flex: 10% !Important
    }
}

Can you check it again? If you haven't changed anything, you can send all current code in Custom CSS, we will try checking it.

Hi @tuanphan I didn't made any edits only copy and paste. I will paste all my codes from custom CSS below.

 

/* Float buttons hover color */  
ul.tp-float-buttons a:hover {
    color: cornflowerblue;
      background-color: white;
}

/*Scrolling for float buttons */
html {
  scroll-behavior: smooth !important;
}

/*Resize html code block margin */

#block-yui_3_17_2_1_1648756245201_8682 
{
  margin-top: 5%;
  margin-bottom: -5%;
}

/*Resize block margin */

#block-yui_3_17_2_1_1651774340364_46974 
{
  margin-top: 0%;
  margin-bottom: -9%;
}

#block-yui_3_17_2_1_1651774340364_76792 
{
  margin-top: 0%;
  margin-bottom: -9%;
}

#block-yui_3_17_2_1_1651774340364_127042 
{
  margin-top: 0%;
  margin-bottom: -9%;
}

#block-yui_3_17_2_1_1651774340364_144402
{
  margin-top: 0%;
  margin-bottom: -9%;
}

#block-28ba7bea327835232ba2
{
  margin-top: 0%;
  margin-bottom: -8%;
}

/*Resize images desktop */

#block-6b71612d906ca3a8a193
{ 
  width: 55% !important;
  margin: 0 auto;
}

#block-yui_3_17_2_1_1651082593061_249403
{ 
  width: 70% !important;
  margin: 0 auto;
}

#block-b22c525103555017dc85
{ 
  width: 77% !important;
  margin: 0 auto;
}

#block-e75c02ccf5a2b3d218d8
{ 
  width: 55% !important;
  margin: 0 auto;
}

#block-7b22c016ad2da8d7fb7b
{ 
  width: 80% !important;
  margin: 0 auto;
}

#block-2f4096ed33cb45aacfe6
{ 
  width: 75% !important;
  margin: 0 auto;
}

#block-e5b7903c559f46d79a66
{ 
  width: 74% !important;
  margin: 0 auto;
}

#block-2d3c45a1f8276ae5e0a3
{ 
  width: 75% !important;
  margin: 0 auto;
}

#block-yui_3_17_2_1_1651082593061_249403
{ 
  width: 95% !important;
  margin: 0 auto;
}

#block-yui_3_17_2_1_1651000372674_27007
{ 
  width: 90% !important;
  margin: 0 auto;
}

#block-yui_3_17_2_1_1651113089004_16720
{ 
  width: 75% !important;
  margin: 0 auto;
}
#block-0c11319bad0ca9f9dfe6
{ 
  width: 60% !important;
  margin: 0 auto;
}

#block-yui_3_17_2_1_1654034917877_17026
{ 
  width: 35% !important;
  margin: 0 auto;
}

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
  
#block-yui_3_17_2_1_1650319070365_6611 {
    /* Hide hover menu */
      ul.tp-float-buttons {
        visibility: hidden;
    }
      /* Hide mobile header */
      ul.tp-float-buttons {
        display: none;
    }
  }
  
#block-yui_3_17_2_1_1649700073426_9651 {
  width: 96% !important;
  margin-top: -7%;
  margin-bottom: -5%;
}
  
#block-yui_3_17_2_1_1650051913040_46731 { 
  width: 30% !important;
  margin: 0 auto;
}
  
#block-yui_3_17_2_1_1650322301445_28998 { 
  width: 30% !important;
  margin: 0 auto;
}
  
#block-yui_3_17_2_1_1649700073426_9651 
{ 
  width: 105% !important;
  margin: 0 auto;
}
  
#block-yui_3_17_2_1_1649790152842_9027
  {
    width:35% !important;
    margin: 0 auto;
  }

#block-yui_3_17_2_1_1649704877348_22842
  {
    width:75% !important;
    margin: 0 auto;
  }

#block-yui_3_17_2_1_1649732310307_32259
  {
    width:70% !important;
    margin: 0 auto;
  }

#block-yui_3_17_2_1_1649732310307_48190
  {
    width:50% !important;
    margin: 0 auto;
  }

#block-f18f0f2fc97fc0500c1d
  {
    width:50% !important;
    margin: 0 auto;
  }

#block-yui_3_17_2_1_1648756245201_5868
  {
    width:65% !important;
    margin: 0 auto;
    margin-top: -22px;
  }

#block-yui_3_17_2_1_1650503941866_7444
    {
    width:50% !important;
    margin: 0 auto;
    margin-top: -22px;
  }
  
#block-yui_3_17_2_1_1648756245201_8682.sqs-block.code-block.sqs-block-code {
  margin-top: 35px;
  margin-bottom: -30px;
}

#block-b22c525103555017dc85
{ 
  width: 55% !important;
  margin: 0 auto;
}

#block-7b22c016ad2da8d7fb7b
{ 
  width: 55% !important;
  margin: 0 auto;
}
  
#block-0c11319bad0ca9f9dfe6
{ 
  width: 58% !important;
  margin: 0 auto;
}

#block-e5b7903c559f46d79a66
{ 
  width: 65% !important;
  margin: 0 auto;
}

#block-2d3c45a1f8276ae5e0a3
{ 
  width: 69% !important;
  margin: 0 auto;
}

#block-2f4096ed33cb45aacfe6
{ 
  width: 71% !important;
  margin: 0 auto;
  }
  
#block-1993081fa1499047d740
  { 
  width: 50% !important;
  margin: 0 auto;
  }

#block-5f847f0beee4ea4ee9e4
   { 
  width: 50% !important;
  margin: 0 auto;
  }
  
#block-yui_3_17_2_1_1653586622226_134042
{ 
  width: 50% !important;
  margin: 0 auto;
  }

  
 
[data-section-id="626980d1d9e96013fd7e8766"] 
  {
    min-height: 10vh !important;
    height: 10vh !important;
}
  
[data-section-id="62507d9fca29bc23537d2947"] {
    min-height: 8vh !important;
    height: 8vh !important;
}

[data-section-id="62698675df6cb02eb0441d25"]
   {
    min-height: 1vh !important;
    height: 1vh !important;
}

[data-section-id="6269868d8b2e2c4392d1f537"]
   {
    min-height: 1vh !important;
    height: 1vh !important;
}
  
[data-section-id="626986a1b4c1367b5beb13ce"]
   {
    min-height: 2vh !important;
    height: 2vh !important;
}

[data-section-id="62507bf930f8e53fcf4f11ba"]
   {
    min-height: 17vh !important;
    height: 17vh !important;
}

[data-section-id="625f3413f4422920a1b76e80"]
   {
    min-height: 17vh !important;
    height: 17vh !important;
}

[data-section-id="624deabc2b3a56460e02ef43"]
   {
    min-height: 20vh !important;
    height: 20vh !important;
}

[data-section-id="62589c0ab5bcbc1484f43174"]
   {
    min-height: 4vh !important;
    height: 4vh !important;
}

[data-section-id="6258e12d4638103d51ef6153"]
   {
    min-height: 18vh !important;
    height: 18vh !important;
}

[data-section-id="62684f58eeb4040f2fc235d1"]
   {
    min-height: 2vh !important;
    height: 2vh !important;
}
  
[data-section-id="62684d602e5e6805472ec85b"]
   {
    min-height: 2vh !important;
    height: 2vh !important;
  }

[data-section-id="626c430b70c93524a10eb864"]
   {
    min-height: 6vh !important;
    height: 6vh !important;
}

[data-section-id="623cce9b217b9c661db8fd34"]
   {
    min-height: 6vh !important;
    height: 6vh !important;
}
  
@media screen and (max-width:991px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
.showOnDesktop .header-actions-action.header-actions-action--cart {
    display: none;
}
    .header-title {
        width: 10% !Important;
        flex: 10% !Important;
    }
}
}

 

Edited June 19, 2022 by lfang2

You have a } in incorrect position. But if remove it, I think it will create other problems.

Try moving my code to top of Custom CSS box.

7 hours ago, tuanphan said:

You have a } in incorrect position. But if remove it, I think it will create other problems.

Try moving my code to top of Custom CSS box.

YES THAT WORKS! Thank you so much @tuanphan! It finally show up.