Custom code for mobile hamburger

Hi,

I have added custom CSS to my website for the hamburger and as you can see for desktop I have the width at 50% which is fine but for mobile it is also 50% which I don't want- can someone give a custom code so that on mobile the hamburger display on the whole screen (100%).

Also please can you give me a code to reduce the size of the text in both the desktop and mobile hamburger?

Thanks

https://www.wildingsnorthumberland.co.uk/

CODE BELOW:

.header .header-burger{display:flex}
.header-nav, .header-actions {display:none}
.header--menu-open .header-menu {
opacity: 1; visibility: visible; width: 60%;
margin-left: 50%;
box-shadow: -5px 5px 15px #000}

https://www.wildingsnorthumberland.co.uk/

@tuanphan are you able to help please?

Want it to cover 100% or 75% of the screen on mobile and the text to be smaller

Is anyone able to help??

perfect that's worked thank you

Do you have code to reduce text size in hamburger please for both desktop & moible?

On 5/26/2023 at 9:46 PM, SeanCrafted said:

perfect that's worked thank you

Do you have code to reduce text size in hamburger please for both desktop & moible?

Add this under

.header-menu * {
	font-size: 12px !important;
}