Overlay menu split into 2 columns

Site URL: https://keyboard-jaguar-k52z.squarespace.com/

Add to Design > Custom CSS

/* Overlay menu 2 columns */
.header-menu-nav-folder-content {
    display: grid !important;
    grid-template-columns: Repeat(2,1fr);
}

Hi @tuanphan, it works now! Thank you 🙂

[edit] Actually something weird is happening: sometime it works and sometimes it appears just one column at the center of the page. Any idea why?

Ps: if you have time could you check my other topics?

- https://forum.squarespace.com/topic/194208-search-icon-opens-into-full-screen/
- https://forum.squarespace.com/topic/194210-seamless-scrolling-text-in-announcement-bar/

Thank you so much!

On 4/30/2021 at 2:45 AM, MaggieBovary said:

Hi @tuanphan, it works now! Thank you 🙂

[edit] Actually something weird is happening: sometime it works and sometimes it appears just one column at the center of the page. Any idea why?

 

Ps: if you have time could you check my other topics?

- https://forum.squarespace.com/topic/194208-search-icon-opens-into-full-screen/
- https://forum.squarespace.com/topic/194210-seamless-scrolling-text-in-announcement-bar/

Thank you so much!

 

 

Try new code

.header-menu-nav-folder-content {
    display: -ms-grid !important;
    display: grid !important;
    grid-template-columns: repeat(2,1fr);
}

Hi @tuanphan thanks for your help! I'm still working on the desktop version so no worries if you see errors in the mobile and tables one, I will fix them later (thanks for flagging them thoguh!)

I have a few other issues I couldn't manage to solve, could you take a look please:

1. https://forum.squarespace.com/topic/194208-search-icon-opens-into-full-screen/

2. https://forum.squarespace.com/topic/194210-seamless-scrolling-text-in-announcement-bar/

Last thing, do you know how to substitute the logo in the overlay menu? No wthe logo is red, so when the red menu opens the logo is not visible anymore.

Thanks a lot

On 5/3/2021 at 1:03 AM, MaggieBovary said:

Hi @tuanphan thanks for your help! I'm still working on the desktop version so no worries if you see errors in the mobile and tables one, I will fix them later (thanks for flagging them thoguh!)

I have a few other issues I couldn't manage to solve, could you take a look please:

1. https://forum.squarespace.com/topic/194208-search-icon-opens-into-full-screen/

2. https://forum.squarespace.com/topic/194210-seamless-scrolling-text-in-announcement-bar/

Last thing, do you know how to substitute the logo in the overlay menu? No wthe logo is red, so when the red menu opens the logo is not visible anymore.

Thanks a lot

Add to Design > Custom CSS

/* change logo when clicking burger */
body.header--menu-open .header-title-logo a {
    background-image: url(https://cdn.pixabay.com/photo/2021/04/27/18/54/sunflower-6212201__340.jpg) !important;
}

Awesome! Thanks a lot @tuanphan 🙂

On 5/11/2021 at 6:51 PM, MaggieBovary said:

Awesome! Thanks a lot @tuanphan 🙂

You're welcome. If you have any other problems, let me know. We will support

On 4/28/2021 at 9:47 PM, MaggieBovary said:

Site URL: https://keyboard-jaguar-k52z.squarespace.com/

Hi there,

I'd like to split the overlay menu into 2 columns, something like the image attached.

This is the website I'm working on: https://keyboard-jaguar-k52z.squarespace.com/

Password: tpt-2021

Any suggestions? 🙂

Thanks!

Hi there, i'm absolutely in love with this menu you've designed, could you please share the code you used to create the different font page number detail before the menu nav links? I'm having real trouble trying to do this on my menu! thank you 

On 8/24/2023 at 9:32 PM, daniellenoakes said:

Hi there, i'm absolutely in love with this menu you've designed, could you please share the code you used to create the different font page number detail before the menu nav links? I'm having real trouble trying to do this on my menu! thank you 

If you share link to your site, we can help you easier

I used this code to split the menu into 2 columns, but not working. Are there any alternatives?

On 11/19/2023 at 7:44 PM, krtsfbk said:

I used this code to split the menu into 2 columns, but not working. Are there any alternatives?

Use this new code. 

/* Overlay menu 2 columns */
.header-menu-nav-folder-content>div {
    display: grid !important;
    grid-template-columns: repeat(2,1fr);
}

If it doesn't work, What is your site url?

On 11/22/2023 at 5:33 AM, tuanphan said:

Use this new code. 

/* Overlay menu 2 columns */
.header-menu-nav-folder-content>div {
    display: grid !important;
    grid-template-columns: repeat(2,1fr);
}

If it doesn't work, What is your site url?

It worked eventually, I just had to refresh! Thank you so much, greatly appreciated! 

I've run into another issue, though. One of the menu items leads to a "submenu" which opens to a list of links that are stacked in a single column (sharing a screenshot so you can get a better idea). How do I turn this new "submenu" into 2 columns as well? Thanks in advance!

On 12/4/2023 at 3:47 AM, krtsfbk said:

It worked eventually, I just had to refresh! Thank you so much, greatly appreciated! 

I've run into another issue, though. One of the menu items leads to a "submenu" which opens to a list of links that are stacked in a single column (sharing a screenshot so you can get a better idea). How do I turn this new "submenu" into 2 columns as well? Thanks in advance!

Use this code. If it doesn't work, please share link to your site

@media screen and (min-width:768px) {
[data-folder] .header-menu-nav-folder-content {
    display: grid !important;
    grid-template-columns: repeat(2,1fr) !important;
}
}