Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
beren

Change mobile navigation in 7.1

Question

Site URL: https://www.callummckirdy.com/

Hi.

On a customer's site they wanted to go with a really clean menu item so we've hidden all the site navigation under a single button for the main navigation.

491533262_ScreenShot2020-06-03at11_14_53.png.78dce541e31c6718249beee31cee6892.png

 

But that navigation looks rubbish on a mobile device:

IMG_4C425E3BEC45-1.thumb.jpeg.bd895ca7bab06099180f5329e7bd3871.jpeg > IMG_71CFFBD6A07B-1.thumb.jpeg.7b99cbe82b8d36182dc4bc3d00e7525f.jpeg

 

Any ideas on how to remove the "Menu" when ONLY on a mobile device?

Thanks for your help.

B

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0
Posted (edited)

 

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

Edited by jpeter

Share this post


Link to post
  • 0

Thank you so much @jpeter it works so well.

This is amazing! I don't really know CSS but I am trying to learn.

It appears you are calling the second menu screen first with

.header-menu-nav-folder[data-folder="root"] {
    position: relative;
    min-height: auto;
    order: 2;
  }

But then it looks like you are saying "do not display any content".

.header-menu-nav-folder[data-folder="root"] .header-menu-nav-folder-content {
    display: none;
  }

This appears to be hiding 'back' button:

.header-menu-controls-control[data-action="back"] {
    display: none;
  }

Although, I'm sorry, i don't really understand the rest.

Thank you for your help.

Share this post


Link to post
  • 0

@beren Glad it worked for you! I updated the CSS by adding some comments to each CSS ruleset that will hopefully help you figure my logic behind the styles.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...