add a circle border around the menu burger icon

Hi there, im looking to add a circle border around the burger menu icon but having difficulty.

the code im trying is: 

/* burger */
.burger-inner>div {
    width: 50% !important;
}

.burger-inner>div {
    left: unset !important;
    right: 0 !important;
}

.burger {border:1px solid #1d1d1d;
  border-radius:50%;
}

www.moonlitdesign.uk/home-old

i've managed to get a circle border, but the close icon is in the wrong place. it needs nudging into the center of the circle / left. updated code:

/* burger */
.burger-inner>div {
    width: 50% !important;
}

.burger-inner>div {
    left: 0 !important;
    right: 0 !important;
}

.burger-box {border:1px solid #1d1d1d;
  border-radius:50%;
}

Use this CSS code to move X to center

body.header--menu-open div.burger-inner>div {
    position: relative;
    left: -5px !important;
}

9 hours ago, tuanphan said:

Use this CSS code to move X to center

body.header--menu-open div.burger-inner>div {
    position: relative;
    left: -5px !important;
}

 

Hey @tuanphan ,

thank you so much!!!! i just had to edit the code slightly to this instead:

//close icon//

body.header--menu-open div.burger-inner>div {
    left: -6px !important;
}
 

//////

the position relative was making the icon not look like a cross for some weird reason haha so i just took it out.

all the best