Jump to content

Overlay menu split into 2 columns

Recommended Posts

Add to Design > Custom CSS

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

image.thumb.png.b1d9fb992bc541e83cfaa2755b7af9f6.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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!

 

 

Edited by MaggieBovary
Link to comment
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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 2 years later...
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!

Screenshot 2021-04-28 at 21.45.24.png

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 

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 2 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.