Jump to content

NicFrew

Member
  • Posts

    5
  • Joined

  • Last visited

Posts posted by NicFrew

  1. On 6/3/2020 at 4:59 PM, jpeter said:

     

    Adding the following CSS should put you in a good spot:

    /* Mobile nav styles */
    @media (max-width: 799px){
    
      /* Make the sub menu and container that contains the icons spaced apart into a column */
      .header--menu-open .header-menu .header-menu-nav-list {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    
      /* Override default properties to bring the sub menu into view */
      .header-menu-nav-folder {
        position: relative; 
        transform: translateX(0);
        min-height: auto;
      }
      
      /* Reduce the font size and adjust the space between the lines */
      .header-menu-nav-folder a {
        font-size: 2.1rem;
        line-height: 1;
      }
      
      /* 
        Override the default `position` and `min-height` properties of the main menu container
        that also contains the icons and place it below the sub menu using the `order` property.
       */
      .header-menu-nav-folder[data-folder="root"] {
        position: relative;
        min-height: auto;
        order: 2;
      }
      
      /* Hide the container of the main menu */
      .header-menu-nav-folder[data-folder="root"] .header-menu-nav-folder-content {
        display: none;
      }
      
      /* Hide the back button */
      .header-menu-controls-control[data-action="back"] {
        display: none;
      }
    }

    See article on how to add CSS: https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript

    Hello, are you able to please help me with the above if I send through a similar issue?

×
×
  • 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.