Jump to content

Mobile Menue code issue

Recommended Posts

Hello, i have written some code for my mobile menu and it was showing fine but now when i go to preview the menu the mobile menu is blank. Couls someone support me on this please.

Here is the code 

 

@media screen and (max-width: 768px) {
    .header-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(500px);
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        width: 100%;
        left: unset;
        padding-bottom: 600px; /* Add your desired padding value here */
        padding-left: 30px; /* Add your desired left padding value here */
        padding-right: 20px; /* Add your desired right padding value here */
    }
    .header--menu-open .header-menu {
         transform: translateX(0);
    }
    .header-menu-nav-folder, .header-menu-nav-item a, .header--menu-open .header-menu .header-menu-nav-list,
    .header-menu-actions, .header-menu-cta {
        transition: unset !important;
        transform: unset !important;
    }
    body.header--menu-open #page {
        transform: translateX(-70%);
        transition: all 0.4s ease;
    }
    #page {
        transition: all 0.4s ease;
    }
    div.container * {
        font-size: 17px;
        text-align: left;
    }
    .header-menu-actions.social-accounts {
        justify-content: flex-start !important;
    }
  .header-menu-nav-item-content{
    background-image: none !important;
  }
    .header-menu-nav-item a {  /* Targeting each menu item */
      text-align:left;
      margin-left:30px;
      width:100%;
      border-bottom: 0.5px solid white;
      padding-bottom:6px;
        margin-right: 0px; /* Adding space between menu items */
    }
    /* Remove the margin from the last item */
    .header-menu-nav-item:last-child a {
        margin-right:0px;
      
    }
}

@media screen and (min-width: 769px) {
    .header-menu .contact-link, /* Replace with actual class or ID for the Contact link */
    .header-menu .about-link {  /* Replace with actual class or ID for the About link */
        display: none;
    }
}
 

Screenshot 2024-07-22 at 19.55.13.png

Link to comment
  • Replies 1
  • Views 751
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.