Overlapping of button and hamburger menu (Mobile)

Hi all, as you can see, my button is too close to the hamburger menu. In smaller screen, they will overlap. How do I shift the botton <<

Can you share your website URL?

apologies. www.mefaceyoga.com

Thanks, when I take a look the button does not appear, have you removed it?

I have this exact same problem...any fix to it?

 

@CameronCogs I can't see the issue so I can't fix it, can you share your website URL?

Thanks for the reply Ziggy

www.myvitaminscore.com

password: 1234

@Ziggy yes i removed it. Should I place back so you can look into it? Or could you help me with a code to have the button beside my hamburger menu?

@Matthewese You can add this code snippet within the Custom CSS panel. If you've already added any code previously, insert this code after the existing code.

@media only screen and (max-width: 1024px) {
	.header-title-nav-wrapper {
		flex: 30% !important;
	}
	.header-layout-nav-center .header-actions {
		width: 50% !important;
		display: flex !important;
		justify-content: flex-end !important;
	}
	.header .header-actions-action--cta {
		width: auto !important;
	}
}

@CameronCogs You can add this code snippet within the Custom CSS panel. 

@media only screen and (max-width: 1024px) {
	.header .header-actions {
		display: block;
	}
	.header-title-nav-wrapper {
		flex: 30% !important;
	}
	.header-layout-nav-center .header-actions {
		width: 50% !important;
		display: flex !important;
		justify-content: flex-end !important;
	}
	.header-actions--right .header-actions-action {
		margin: 0 2.5vw 0 0vw !important;
	}
}

On 9/16/2023 at 12:32 AM, Lesum said:

@CameronCogs You can add this code snippet within the Custom CSS panel. 

@media only screen and (max-width: 1024px) {
	.header .header-actions {
		display: block;
	}
	.header-title-nav-wrapper {
		flex: 30% !important;
	}
	.header-layout-nav-center .header-actions {
		width: 50% !important;
		display: flex !important;
		justify-content: flex-end !important;
	}
	.header-actions--right .header-actions-action {
		margin: 0 2.5vw 0 0vw !important;
	}
}

Thank you so much for the detailed reply. Unfortunately, adding this code actually made it worse.
I have left your code in for now so you are able to look again, but not sure what is happening here.

The button is overlapped even more now.

@CameronCogs Can you also please add this code snippet:

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

15 minutes ago, Lesum said:

@CameronCogs Can you also please add this code snippet:

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

IT WORKED!

Thank you so much, truly appreciated Lesum.  Thats awesome, who knew it needed all this coding just for a button lol.

@Ziggy on iphone it still looks too close. Is there a way to shift it further <

@Ziggybumping this.

@Ziggythanks alot!!

2 minutes ago, Matthewese said:

@Ziggy thanks a lot!!

Happy to help! Can you mark the answer as the solution to this thread and give it a like? Thanks!