Jump to content

Custom button placement

Go to solution Solved by Lesum,

Recommended Posts

Looking for a bit of help getting a button to appear in a specific spot on my mobile site only. On the main page I am trying to get the schedule online button out of the burger menu and to display in the clouds below the logo in my header. I have had success getting the button to show up relatively where I want it, but I can't seem to do it without messing up the logo's position.

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

Top Posters In This Topic

@Peak You can add this code snippet within the Custom CSS panel:

@media only screen and (max-width: 1024px) {
	.header .header-actions {
		display: block !important;
		order: 3 !important;
	}
	.header-title-nav-wrapper {
		order: 1 !important;
	}
	.header .header-mobile-layout-logo-center-nav-right .header-display-mobile .header-burger {
		order: 2 !important;
	}
	.header .header-mobile-layout-logo-center-nav-right .header-display-mobile .header-title {
		text-align: left !important;
	}
	.header-title-logo {
    	padding-left: 0px !important;
	}
	.header-actions--right .header-actions-action {
		margin: 0 0 0 0vw !important;
	}
	.header-display-mobile {
		flex-wrap: wrap !important;
		row-gap: 6vw !important;
	}
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
On 9/19/2023 at 5:17 PM, Lesum said:

@Peak You can add this code snippet within the Custom CSS panel:

@media only screen and (max-width: 1024px) {
	.header .header-actions {
		display: block !important;
		order: 3 !important;
	}
	.header-title-nav-wrapper {
		order: 1 !important;
	}
	.header .header-mobile-layout-logo-center-nav-right .header-display-mobile .header-burger {
		order: 2 !important;
	}
	.header .header-mobile-layout-logo-center-nav-right .header-display-mobile .header-title {
		text-align: left !important;
	}
	.header-title-logo {
    	padding-left: 0px !important;
	}
	.header-actions--right .header-actions-action {
		margin: 0 0 0 0vw !important;
	}
	.header-display-mobile {
		flex-wrap: wrap !important;
		row-gap: 6vw !important;
	}
}

 

It seems like this code has worked but for some reason the button is not showing up in the header still. I adjusted a few measurements to re align the logo back to center as well. I have the current code plugged in on the mobile site but i can't see whats causing the button to no show.

Link to comment
  • Solution

@Peak Your previous code is conflicting with the code I provided. You can add this code:

@media only screen and (max-width: 1024px) {
	.header .header-actions-action--cta {
		display: block !important;
	}
}

Add this to center the button and the header logo:

@media only screen and (max-width: 1024px) {
	.header-title-logo {
		padding-left: 0px !important;
	}
	.header .header-mobile-layout-logo-center-nav-right .header-display-mobile .header-title {
		text-align: center !important;
	}
	.header .header-actions {
		width: 100% !important;
		padding-right: 50px !important;
	}
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.