Burger Menu in desktop view with transparent background and custom size (not full screen)

Site URL: https://www.tma-mdpartner.com

Hi Squarespacers!

I'm totally new to squarespace and have '0' knowledge in coding. I've been struggling for a week finding the solution to creating a dual language web. I found the code on Youtube which allowed my to customize the menu to appear in one language at a time. But there's a problem with the code since it won't display the submenu (dropdown) in the second language (English) in the mobile view as shown in Figure 1.2

Figure 1.1 : The submenu works ok in the first language, which is Thai.

Figure 1.2 : The submenu won't be displayed when clicked in the mobile view.

Figure 1.3 : The code works fine in the desktop mode.

So I ended up with not using the dropdown menu with the troubled code with English burger menu in mobile view. But this leaves too options in the desktop view which doesn't look very pretty 😞 

So I forced a burger menu in desktop view to avoid overloaded options in the menu bar.

However, I'm now struggling with the burger menu when expended in desktop mode which takes up the whole screen and the space between options is way too big. I tried many codes already but didn't work. 😞 

So I'm asking for helps here if you could please let provide the codes that would let me:

1) Minimise  / customize the size of burger menu when expanded

2) Minimise the space between options in the menu

3) Make the background transparent

or even better if 

4) Fix the issue of the dropdown menu in mobile not displayed (I'll give the code I used in my reply to this post)

Here's website : https://www.tma-mdpartner.com/ 

Please help. Thank you so much in advance. Cheers!

Sean 🙂

Here's the code I used to force the burger menu in desktop view.

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:992px) {
 /* hide navigation */
    .header-nav {
    display: none;
    background-color: transparent; <--- doesn't seem to work!
}
  
/* Hide header button */
.header-actions {
    display: none;

/* show burger */
.header-burger {
  display: flex; 
  
/* Show overlay mobile menu */
.header--menu-open .header-menu {
  opacity: 1;
  visibility: visible;
  line-height: 1em;
}
  .header--menu-open {
  transition: opacity .5s;
  opacity: 0.9; <--- doesn't seem to work!
  background-color: transparent; <--- doesn't seem to work!
  visibility: visible;
  line-height: 1em;
}
}

Here's the code I used for dual language menu in Code injection.

<style>
  #header .header-nav-item:nth-child(1){
    display:none
  }
    #header .header-nav-item:nth-child(2){
    display:none
  }
    #header .header-nav-item:nth-child(3){
    display:none
  }
    #header .header-nav-item:nth-child(4){
    display:none
  }
    #header .header-nav-item:nth-child(5){
    display:none
  }
    #header .header-nav-item:nth-child(6){
    display:none
  }
    #header .header-nav-item:nth-child(13){
    display:none
  }    
    #header .header-nav-item:nth-child(16){
    display:none
  }
  
  @media screen and (max-width:1511px){
    #header .header-menu-nav-item:nth-child(1){
    display:none}
    #header .header-menu-nav-item:nth-child(2){
    display:none}
    #header .header-menu-nav-item:nth-child(3){
    display:none}
    #header .header-menu-nav-item:nth-child(4){
    display:none}
    #header .header-menu-nav-item:nth-child(5){
    display:none}
    #header .header-menu-nav-item:nth-child(6){
    display:none}
    #header .header-menu-nav-item:nth-child(13){
    display:none}    
    #header .header-menu-nav-item:nth-child(16){
    display:none} 
  }
</style>

I've fixed the space between the line in the menu with:

  .header-menu-nav-item a {
   margin-top: 12px;
   margin-bottom: 12px;}

But still unable to control the size of the menu navigation folder. Not sure where I need to put this one:

  .header-menu-nav-folder{
   min-height: 50%;
   max-height: 50%; }