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

Change mobile navigation in 7.1


beren

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

Link to comment

17 answers to this question

Recommended Posts

  • 0

 

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

Link to comment
  • 0

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!

Edited by Ogy
Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

image.thumb.png.6afddccc596d00489aab4873464df5c0.png

 

Link to comment
  • 0
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

image.thumb.png.6afddccc596d00489aab4873464df5c0.png

 

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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:
image.png.ecaa1c508d7cb7b954e5f63f8b3a5bb2.png

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?

image.png.32411d959039d82fb9cd6f16e5306bbc.png

Link to comment
  • 0
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:
image.png.ecaa1c508d7cb7b954e5f63f8b3a5bb2.png

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?

image.png.32411d959039d82fb9cd6f16e5306bbc.png

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.

Link to comment
  • 0

I need help

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

Quote

From this

image.png.79d8e900008bd9e231f4350023013d65.png

 

Quote

Atleast it looks like something like to this:

 

 

image.png

Edited by Mie_MIe
Link to comment
  • 0
3 hours ago, Mie_MIe said:

I need help

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

image.png.79d8e900008bd9e231f4350023013d65.png

 

 

image.png

Hi. Can you share link to your site?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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