Help with Desktop Hamburger Menu

Hi, I have used this code to add a hamburger menu to the desktop version of my site.

/* Hamburger nav on desktop */
.header .header-burger{display:flex}
.header-nav, .header-actions {display:none}
.header--menu-open .header-menu {
opacity: 1; visibility: visible;}
.header-menu-nav-item {line-height: 20px!important;}

This works great but I have noticed that there is now a strikethrough over the text of whatever page I am currently on. Is there a way to make this an underline rather than a strikethrough?

I have also noticed that the hamburger icon has knocked my logo off centre. Is there also a way to fix this?

Thank you in advance for any help!

Chris

Password: parttwo

Can you share your website URL?

This may be the reason for the underline becoming a strikethrough:
.header-menu-nav-item {line-height: 20px!important;}

Try changing it to 1.2em from 20px.

@Ziggy Thanks for the reply! I tried changing it to 1.2em but it didn't seem to work.

Would there be anything else you would suggest?

Thanks, Chris

My URL is https://violin-ruby-pfwe.squarespace.com

Password: parttwo

Thanks @Ziggy That worked!

Thank you for all the help!

Chris

Hi, @Ziggy I have just noticed that the code for centring the title logo on desktop has knocked it off centre when viewed on mobile. 

Is there a way to centre the logo normally on mobile?

Thanks again,
Chris

Try this instead:

@media only screen and (min-width:768px) {
  .header-title-nav-wrapper {
     margin-left: 47px;
  }
}

@Ziggy That worked! Thank you so much!

Chris