Mobile Menu customization

Hi, I want to change the mobile menu of my site. I want it to look exactly like mobile menu of this website https://www.zizka.ca/ (should open from right, not filling up the screen, same font, same + icon before the expandable menu items, and capitalize throughout) and additional social icons, but aligned at the bottom of the mobile menu, not over the CTA button.

Can you please tell me what codes do I need to add? I'm currently using some codes to make the hamburger icon size smaller but it slightly messes up the position of the X as they are not perfectly aligned. Please let me know, many thanks! 

My site link: https://bluebird-tuba-waaw.squarespace.com/

@tuanphan Can you please help me out with this?

To achieve same, it require a lot of CSS code, so I will help you deal with each problem one by one, once I finish one problem, I will move on to the next problem.

Also, current I don't see Burger Menu. Can you check again?

8 hours ago, tuanphan said:

To achieve same, it require a lot of CSS code, so I will help you deal with each problem one by one, once I finish one problem, I will move on to the next problem.

Also, current I don't see Burger Menu. Can you check again?

 

Thank you, I am ready to deal with this on a problem by problem basis with you. 

Not sure why you don't see the burger menu - it should be present in all devices. 

Updated my site URL to this - https://www.dipanjanpal.com/ 

Can you check?


Also, I applied the following codes to the burger to make it smaller and all - not sure if it affected display on certain screens. Pasting the CSS below - 
 

/* Burger position */
.burger-box {
    right: -5vw;
}

// hamburger menu customization

body:not(.header--menu-open) .burger-inner.header-menu-icon-tripleLineHamburger .top-bun {
    transform: translatey(-6px);
}

body:not(.header--menu-open) .burger-inner.header-menu-icon-tripleLineHamburger .bottom-bun {
    transform: translatey(6px);
}

body:not(.header--menu-open) .burger-inner>div {
    width: 60% !important;
  align: center;
}

button.header-burger-btn.burger {
    padding: 0;
}

/*MOVING THE MOBILE MENU BUTTON IN SQUARESPACE 7.1 CLOSER TO THE LINKS*/
.header-menu-nav-folder-content {
 flex-grow: 0;
}

If there is any problem in the code, and if you want me to remove certain parts or all parts of it, please let me know. 

Thanks a lot for your help. 

You need scroll screen to right to see burger..

Use this code to Custom CSS to make menu slide from right

@media screen and (max-width: 768px) {
.header-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(400px);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.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;
}}

9 hours ago, tuanphan said:

You need scroll screen to right to see burger..

Use this code to Custom CSS to make menu slide from right

@media screen and (max-width: 768px) {
.header-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(400px);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.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;
}}

 

Thank you, I have done that.

I was trying to shorten the window size gradually from my PC and noticed there's one glitch after a breakpoint. Please see the screenshot for details.

1. This slides the menu from the right very well, but like the website zizka.ca I would like to push my homescreen to the left whenever someone opens the burger. 

2. Secondly, I want the fonts sizes of the mobile menu same as that website, with little + icons before the expandable menu items. 

3. Also, I would want the social links at the bottom of the screen whenever someone opens up the mobile menu. I would first want all my menu items left aligned, followed by that CTA button of Shop Prints. And the social icons get to the very bottom. 

I understand it's a lot to ask from you, so please free to answer me at your own pace. As always, I appreciate your help a lot. 

Use this new code

@media screen and (max-width: 768px) {
.header-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(400px);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    width: 70%;
    left: unset;
}
.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;
}
}

Thank you so much for the code @tuanphan

I have implemented it and noticed the following issues: 

It does not push the header like it does in the site zizka.ca and for that, one can click on the hamburger and then scroll on the homepage without closing the hamburger. It looks a bit cumbersome. Ideally, when the mobile menu is open, I want a user to either click on the X icon or part of the visible homepage for the menu to close. 

Also, it slides with a white screen first and then fills it up by black screen when I click on the hamburger - the transition doesn't look smooth.

Can you help me out with these? Thank you so much! 

Link to the screen record video - https://www.icloud.com/photos/#0587cd-VmlVr4UteqXFYOdXvQ

@dipanjanpal

Did you figure out this: "one can click on the hamburger and then scroll on the homepage without closing the hamburger. It looks a bit cumbersome. Ideally, when the mobile menu is open, I want a user to either click on the X icon or part of the visible homepage for the menu to close. "

I have the same problem.. Please let me know

x

21 hours ago, HVibskov said:

Did you figure out this: "one can click on the hamburger and then scroll on the homepage without closing the hamburger. It looks a bit cumbersome. Ideally, when the mobile menu is open, I want a user to either click on the X icon or part of the visible homepage for the menu to close. "

I have the same problem.. Please let me know

x

With #2, you can use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <script>
$(document).ready(() => {
  document.querySelector('.header-menu').id = 'test';
  document.querySelector('.header-display-mobile .header-burger-btn').id = 'test-btn';
  
  function handleMenu(e) {
    const els = e.path;
    const menu = els.find(el => el.id === 'test')
    const btn = els.find(el => el.id === 'test-btn')
    if (!menu && !btn) {
      setTimeout(() => {
        const isOpen = document.querySelector('.js-header-burger-close-title').getAttribute('hidden') === null;
  
    if (isOpen) document.querySelector('.header-display-mobile .header-burger-btn').click();
      }, 100)
    }
    
  }
  window.addEventListener('click', handleMenu);

})
</script>

On 12/13/2023 at 3:20 AM, tuanphan said:

With #2, you can use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <script>
$(document).ready(() => {
  document.querySelector('.header-menu').id = 'test';
  document.querySelector('.header-display-mobile .header-burger-btn').id = 'test-btn';
  
  function handleMenu(e) {
    const els = e.path;
    const menu = els.find(el => el.id === 'test')
    const btn = els.find(el => el.id === 'test-btn')
    if (!menu && !btn) {
      setTimeout(() => {
        const isOpen = document.querySelector('.js-header-burger-close-title').getAttribute('hidden') === null;
  
    if (isOpen) document.querySelector('.header-display-mobile .header-burger-btn').click();
      }, 100)
    }
    
  }
  window.addEventListener('click', handleMenu);

})
</script>

 

I've put the codes you placed here into my mobile site and they work, but I find the arrows "<Back" and the dropdown menu i have ">" look super crazy. Are you still working on this one @tuanphan just wondering. I know you help everyone on here

On 1/12/2024 at 8:33 AM, LeauxFi said:

I've put the codes you placed here into my mobile site and they work, but I find the arrows "<Back" and the dropdown menu i have ">" look super crazy. Are you still working on this one @tuanphan just wondering. I know you help everyone on here

You can share your site url, I can check easier

On 1/13/2024 at 4:46 AM, tuanphan said:

You can share your site url, I can check easier

believe it or not, i figured out a combination of code (thru terrible trial and error) to just hide the "<" and ">" completely on the mobile menu. although I would prefer to have a "+" sign instead for my dropdown. its

www.thetenmg.com

On 1/17/2024 at 2:55 AM, LeauxFi said:

believe it or not, i figured out a combination of code (thru terrible trial and error) to just hide the "<" and ">" completely on the mobile menu. although I would prefer to have a "+" sign instead for my dropdown. its

www.thetenmg.com

You mean add + here or + after "Team" item?

On 1/19/2024 at 10:35 PM, tuanphan said:

You mean add + here or + after "Team" item?

IDEALLY a "+" by the team dropdown, and a "<" by the Back button. Is that possible?

On 1/28/2024 at 7:45 AM, LeauxFi said:

IDEALLY a "+" by the team dropdown, and a "<" by the Back button. Is that possible?

You can use this code to Website > Website Tools (under Not Linked) > Custom CSS

a[data-folder-id]:after {
    content: "+";
}
a.header-menu-controls-control.header-menu-controls-control--active span:nth-child(2):before {
    content: "<";
}

On 1/30/2024 at 4:36 AM, tuanphan said:

You can use this code to Website > Website Tools (under Not Linked) > Custom CSS

a[data-folder-id]:after {
    content: "+";
}
a.header-menu-controls-control.header-menu-controls-control--active span:nth-child(2):before {
    content: "<";
}

 

this worked out perfectly, and i think i understand the code written here now which is awesome. But I've now discovered two issues because of it (my fault for sure)

1- Once you expand the folder in the menu to show the team members, and then close the menu compeltely, the text stays in place O_o  and its just floating there like it didn't realize it should go away. And.

2- I have a color changing menu bar active. Its works as intended everywhere else EXCEPT in one case: When you scroll down on any page, the menu color inverts from white to black, and the font color & logo invert from black to white so they're still visible. The problem is, on mobile when you scroll down and hit menu, the word menu actually blends in now. Because the text has inverted to white, and is now on a white background. Is there a way to stop the inversion from happening ONLY when the menu opens on mobile? this is kinda confusing so I'll attach photos

Top of the page view: Correct

Scrolled down until the bar color changed and text inverted: correct

Opened the menu after scrolling down: Wrong 😞

#1. Can you take a screenshot of problem?

#2. Use this CSS code

body.header--menu-open header#header.shrink .burger-box:after {
   color: black !important;
}

14 hours ago, tuanphan said:

#1. Can you take a screenshot of problem?

#2. Use this CSS code

body.header--menu-open header#header.shrink .burger-box:after {
   color: black !important;
}

 

i fiddled with that code a bit when I realized the social icons had also gone white. messy to double up the coding but it worked. I added this onto the bottom of yours to also make my social icons black. thanks tuan!

body.header--menu-open header#header.shrink use {
 fill: black !important;
stroke: black !important;}

as for the issue in number 1, sure. its super weird. but easily repeatable on any phone.

step 1: go to any page and open the menu

step 2: open the team link/nav folder (everything still looks fine)

step 3: tap on the menu to close it out INSTEAD of hitting back to close out the nav folder. my theory is when it slides over the menu to cover the screen, then you go 1 level deeper by going into the nav folder....  it slides back only one level when you choose to close it that way. theory might make no sense but its what i imagine lol

Try using this CSS code to hide it

body:not(.header--menu-open) [data-folder="root"] {
    visibility: hidden;
}