Change mobile navigation in 7.1

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.

But that navigation looks rubbish on a mobile device:

 > 

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

Thanks for your help.

B

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.

@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.

I would love to know how I can adapt this to hide the submenu and have only the top level items link out?

Hi all. I created 2 language selections using below codes for each page's code injection:

#header .header-nav-item:nth-child(4) {display:none} 

And, it works well for Desktop. Then I inserted below code for the page's code injection to let it hide the same folder item in Mobile version:

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(4) {display:none}}

But, Mobile menu, it is also hiding the 4th item under first folder which I believe the code is hiding all 4th item regardless of 4th folder or 4th menu item under first folder. 

Is there any suitable code to used instead of using nth-child or any suggestion/help, please! 

Thank you in advance!

On 11/19/2020 at 2:23 PM, Ogy said:

Hi all. I created 2 language selections using below codes for each page's code injection:

#header .header-nav-item:nth-child(4) {display:none} 

And, it works well for Desktop. Then I inserted below code for the page's code injection to let it hide the same folder item in Mobile version:

@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(4) {display:none}}

But, Mobile menu, it is also hiding the 4th item under first folder which I believe the code is hiding all 4th item regardless of 4th folder or 4th menu item under first folder. 

Is there any suitable code to used instead of using nth-child or any suggestion/help, please! 

Thank you in advance!

Can you share site url? We can help easier

Hello @tuanphan @jpeter,

Thanks it worked wonderfully!

Is there a way to still show some of the items on the "first level" of the menu?

I have there the link to my search page, and otherwise there's no other link on the website.

My website is: www.simpledomus.com

The link to the search page on the computer view it's here it's called  " Buscar ".

here is the link:https://www.simpledomus.com/search

On 12/3/2020 at 12:10 AM, pramirol said:

Hello @tuanphan @jpeter,

 

Thanks it worked wonderfully!

 

Is there a way to still show some of the items on the "first level" of the menu?

I have there the link to my search page, and otherwise there's no other link on the website.

 

My website is: www.simpledomus.com

 

The link to the search page on the computer view it's here it's called  " Buscar ".

here is the link:https://www.simpledomus.com/search

 

Hi. Have you sovled it yet? If not, can you describe in detail? I don't quite understand your question

On 12/5/2020 at 11:55 PM, tuanphan said:

Hi. Have you sovled it yet? If not, can you describe in detail? I don't quite understand your question

Hello @tuanphan, I haven't solved yet.

I'll try to make it clearer.

So this is how my mobile menu looks like now, after adding the code:

And below the original main menu without the code.
I'd like to keep the "Buscar" button that leads to the search page on my blog. Is there a way to do this?

On 12/9/2020 at 9:47 PM, pramirol said:

Hello @tuanphan, I haven't solved yet.

I'll try to make it clearer.

So this is how my mobile menu looks like now, after adding the code:

And below the original main menu without the code.
I'd like to keep the "Buscar" button that leads to the search page on my blog. Is there a way to do this?

Hello @tuanphan, you are always so helpful, I was wondering if you can help with the above?

With the previous code you gave I hid all the folders on the mobile menu so it only shows the links inside them.

But the issue is that the pages that are not folders are also hidden from the mobile navigation.

Sorry to insist. I appreciate your time a lot. I've done lots of research since november but still can't get to the bottom of this to solve it.

I need help

could anyone help me how to make a black background color for my mobile navigation

Quote

From this

Quote

Atleast it looks like something like to this:

 

3 hours ago, Mie_MIe said:

I need help

could anyone help me how to make a black background color for my mobile navigation

 

 

Hi. Can you share link to your site?

56 minutes ago, tuanphan said:

Hi. Can you share link to your site?

This is the link of the site:

https://www.drzelinamedina.com/

@Mie_MIe

It appears you solved your issue?

13 hours ago, creedon said:

@Mie_MIe

It appears you solved your issue?

Yeah I did thank you so much 🙂

I also used this code and it worked nicely, thank you. The only issue is that it did not change the iPad navigation. Any ideas on how to fix?

Thanks again for the help!!

On 9/24/2021 at 3:14 AM, dgaebel said:

I also used this code and it worked nicely, thank you. The only issue is that it did not change the iPad navigation. Any ideas on how to fix?

Thanks again for the help!!

Change 799px to 1024px

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?

5 hours ago, NicFrew said:

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

Can you share site url? We can help easier

Hi, I would like to adjust my mobile menu so that the items in the folder can be opened by sort of a dropdown so that it stays in the same menu and doesn't 'slide' to a next page. check jiwajiwa.com

3 hours ago, sekan said:

I would like to adjust my mobile menu

Please see the following. It's not a dropdown but an outline.

Let us know how it goes.

Hi, thank you so much for all these great customizations. I don't want to hide the "Back" button as I find it useful, but I do want to change it's title from "Back" to this arrow "←" is there anyway to do this? I can't find any resources online. 

1 hour ago, TammySwier said:

I don't want to hide the "Back" button as I find it useful, but I do want to change it's title from "Back" to this arrow "←" is there anyway to do this?

Add the following to Design > Custom CSS.

/* begin mobile menu replace back with arrow */

  .header-menu-controls-control span:nth-child( 2 ) {
  
    display : none;
    
    }
    
  .chevron.chevron--left {
  
    border : unset;
    
    }
    
  .chevron--left {
  
    margin-left : -0.5em;
    transform : unset;
    
    }
    
  .header-menu-controls-control span:nth-child( 1 ) {
  
    visibility : hidden;
    
    }
    
  .header-menu-controls-control span:nth-child( 1 )::before {
  
    content : '←';
    visibility : visible;
    
    }
    
  /* end mobile menu replace back with arrow */

Let us know how it goes.