Custom button placement

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.

Hi,

What is site url? We can check easier

On 9/16/2023 at 9:08 PM, tuanphan said:

Hi,

What is site url? We can check easier

Here is the site url https://peakvisionclinic.com/ 

@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;
	}
}

@Peak Finally add this code snippet to hide the button from the mobile menu:

.header-menu-cta {
    display: none !important;
}

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.

That worked great! thank you for the help!