Seanth

@IXStudio Thanks for sharing the code. Works great for me too! 😃

Thank you so much! You saved me!!

OMG! It works like magic! Thank you soooo much !

Hi @tuanphan I've tried all the codes above and none works for me. I understand that the code varies depending on the current design of the page. Could you please help? Since I forced burger menu in desktop mode, I need to have ""MENU" next to the Burger icon so badly. Here's my site URL https://www.tma-mdpartner.com Thank you.

Here's the code injection on every page for Thai menu. <style> #header .header-nav-item:nth-child(7){ display:none } #header .header-nav-item:nth-child(8){ display:none } #header .header-nav-item:nth-child(9){ display:none } #header .header-nav-item:nth-child(10){ display:none } #header .header-nav-item:nth-child(11){ display:none } #header .header-nav-item:nth-child(12){ display:none } #header .header-nav-item:nth-child(13){ display:none } #header .header-nav-item:nth-child(14){ display:none } #header .header-nav-item:nth-child(16){ display:none } #header .header-nav-item:nth-child(17){ display:none } </style> <style> @media screen and (max-width:1511px){ #header .header-menu-nav-item:nth-child(7){ display:none } #header .header-menu-nav-item:nth-child(8){ display:none } #header .header-menu-nav-item:nth-child(9){ display:none } #header .header-menu-nav-item:nth-child(10){ display:none } #header .header-menu-nav-item:nth-child(11){ display:none } #header .header-menu-nav-item:nth-child(12){ display:none } #header .header-menu-nav-item:nth-child(13){ display:none } #header .header-menu-nav-item:nth-child(14){ display:none } #header .header-menu-nav-item:nth-child(16){ display:none } #header .header-menu-nav-item:nth-child(17){ display:none } } </style>

Hi @tuanphan @bangank36 Here's my site. tma-mdpartner.com I've posted it here, but without any replies. So I've made adjustment to use the mobile menu in the desktop mode which kinda avoided the unsolved problem. This is no problem on mobile and normal size desktop/laptop. But there's another problem (sighhhhh....!) as it shows all menus in both language when displayed on larger screen when expanded. Kindly see below. Here's the CSS code I'm using. /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } .header-menu-nav-item a:hover { color: #ff524a !important; } } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { visibility: visible; opacity: 0.9; *{font-family: 'noto-m',arial; font-size: 18px!important;} .header-menu-nav-item a { margin-top: 8px; margin-bottom: 8px; } } header#header [href="/home-th"]{ color: white; background-color:#ec111a; padding: .2rem 1.2032rem; border-radius: .5rem; } header#header [href="/home-eng"]{ color: white; background-color:#ec111a; padding: .2rem 1.6032rem; border-radius: .5rem; } PS: I'm a code dummie. So I just search, copy and paste, with a little adjustment. Thank you so much for your kind supports!

@bangank36 Thank you for your help, but the code seems to have alter the date to the same date for all events. Please see below. Now sure what happened. I just pasted the code. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://momentjs.com/downloads/moment.js"></script> <script src="https://momentjs.com/downloads/moment-with-locales.js"></script> <script> $(document).ready(function() { if ($(".event-date").length) { var translate = moment($(".event-date").attr("datetime")).locale("TH").format('dddd, MMMM D, YYYY'); $(".event-date").html(translate); } }); </script>

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%; }

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>

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; } }

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 🙂

Hi @Giovani I'm having the same unsolved problem. I've tried using your code but it won't hide the other language menu which is the required feature. Perhaps you can show how this can be tweaked so that it still hide the other language menu as well?

Hi @bangank36 Could you please help with the Thai dates? Thank you so much!