Jump to content

Hamburger Menu (mobile) not working a specific page

Recommended Posts

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

image.thumb.jpeg.6590affca43c5b81dec44eb7bc0fe4e5.jpeg

 

Edited by lfang2
Link to comment
  • Replies 12
  • Views 792
  • Created
  • Last Reply

Top Posters In This Topic

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;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 

Link to comment

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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 by lfang2
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.