Jump to content

Overlay menu and button

By clz23, in Customize with code

Go to solution Solved by KwameAndCo,

Recommended Posts

clz23 Level 4

clz23

Posted
Posted

Hi everyone - I created a landing page on Squarespace, with no additional pages. The header has a button ("Schedule a demo") that links to a form on the landing page. In the mobile experience, Squarespace automatically creates an overlay menu and brings the "schedule a demo" button to the overlay menu. The button is positioned extremely low on the page and there's no content in the middle (most of the page) since I don't have additional pages to navigate to. 

 

What code can I use to either eliminate the overlay/navigation menu and have the button appear on the homepage/header, or to move the button to be higher in the overlay menu rather than at the very bottom of the page?

 

thank you!

Link to comment
  • Replies 3
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

clz23
clz23

@KwameAndCo this worked! thank you so much!!!!! really appreciate your help. 

  • Solution
KwameAndCo Level 13

KwameAndCo

Posted
  • Solution
Posted

Can you link to the site please?

You basically have 2 options:

1. Just reposition the button to the center or top with flexbox: 

// Vertically Repositioned Single Button Mobile Overlay Nav
// @Squareskills
  .header-menu-nav-folder-content {
    display: none;
}
.header-menu-nav-folder {
    justify-content: center; //change to flex-start if you want it at the top 
}

2. Remove the mobile nav and just have a button up top (may not work well with wide logos / large buttons) by overriding a bunch of CSS. 

.header-display-mobile {
  display: none!important;
}
.header-display-desktop {
  display: flex!important;
}
.header-title-nav-wrapper {
    flex: 1!important;
}
.header-burger {
  display: none!important;
}

You will need to tweak to suit your website.

Plug either of the above into your Custom CSS.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
KwameAndCo Level 13

KwameAndCo

Posted
Posted
On 7/12/2023 at 4:17 PM, clz23 said:

@KwameAndCo this worked! thank you so much!!!!! really appreciate your help. 

Happy to

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources