ElieGator Posted January 5, 2021 Share Posted January 5, 2021 Site URL: https://www.lesmenagers.ca/ Hey there, The dropdown menu of my "Services" section in both EN and FR are not complete aaaand for both language it's showing different info. For the EN version it's showing the first 3 linked page under that menu and for the FR version it's showing the last 2 linked pages. There is a total of 5 pages... Sooo I am assuming there is something in my custom CSS coding that's off. Can someone please please help me. Here's what I entered in my custom CSS for the Bilingual coding : for EN pages <style> #header .header-nav-item:nth-child(5) {display:none} #header .header-nav-item:nth-child(6) {display:none} #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} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(5) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(6) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(7) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(8) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(9) {display:none}} </style> for FR pages <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(10) {display:none} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(1) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(2) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(3) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(4) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(10) {display:none}} </style> Thank you so much ! Link to comment
tuanphan Posted January 7, 2021 Share Posted January 7, 2021 Hi. Do you still need help? With multi language site, you can use these guides For Business Plan or higher: https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template For Personal Plan or higher: https://beaverhero.com/squarespace-2-languages/ Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ElieGator Posted January 7, 2021 Author Share Posted January 7, 2021 Hi there @tuanphan I've been following so many of your posts ! You're amazing ! It's been super helpful. I do indeed still need some help though. I still can't figure out why my dropdown menu on the Mobile doesn't display all my services. In EN it displays the first 3 pages and in FR in displays only the last 2. On both languages it should display 5 services on each. I don't know if that makes sense. It's find on desktop but it doesn't work on Mobile. Any idea what I did wrong ? Thank you so so much for your help !! Link to comment
tuanphan Posted January 10, 2021 Share Posted January 10, 2021 (edited) Mobile has same class: nav item - nav dropdown item. Target this class for nav items. nav>div:first-child .header-menu-nav-item:nth-child(8) { display: none; } Do similar for other items. Edited January 10, 2021 by tuanphan Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tuanphan Posted January 10, 2021 Share Posted January 10, 2021 also, you can combine some code into one @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(1) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(2) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(3) {display:none}} to @media screen and (max-width:1511px){ #header .header-menu-nav-item:nth-child(1), #header .header-menu-nav-item:nth-child(2), #header .header-menu-nav-item:nth-child(3) {display:none} } or shorter @media screen and (max-width:1511px){ #header .header-menu-nav-item:nth-child(-n+3) {display:none} } with n run from 0, 1,2,3,4.... Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ElieGator Posted January 12, 2021 Author Share Posted January 12, 2021 @tuanphan Thank you so so much for your help ! I am sorry though but I am not sure I understand the code. It doesn't seem to work. Should I fully remove the codes I already have and add this code you gave me or should it just me modified. This is the code I have been using that works perfectly for the desktop version : <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(10) {display:none} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(1) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(2) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(3) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(4) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(10) {display:none}} </style> Link to comment
Giovani Posted November 29, 2021 Share Posted November 29, 2021 Hi Eli, Did you find a way to resolve this? I have the same issue and I'm using exactly the same code that you Link to comment
Giovani Posted November 30, 2021 Share Posted November 30, 2021 On 1/12/2021 at 9:22 AM, ElieGator said: @tuanphan Thank you so so much for your help ! I am sorry though but I am not sure I understand the code. It doesn't seem to work. Should I fully remove the codes I already have and add this code you gave me or should it just me modified. This is the code I have been using that works perfectly for the desktop version : <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(10) {display:none} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(1) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(2) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(3) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(4) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(10) {display:none}} </style> I have just found the code, you can use: @media screen and (max-width: 1511px) { #header .header-menu-nav-folder:not([data-folder="root"]) .header-menu-nav-item { display: block; } } tuanphan 1 Link to comment
Seanth Posted February 8, 2022 Share Posted February 8, 2022 On 11/30/2021 at 9:47 AM, Giovani said: I have just found the code, you can use: @media screen and (max-width: 1511px) { #header .header-menu-nav-folder:not([data-folder="root"]) .header-menu-nav-item { display: block; } } 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? Link to comment
tuanphan Posted February 12, 2022 Share Posted February 12, 2022 On 2/8/2022 at 12:30 PM, Seanth said: 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? What is your site url? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Seanth Posted February 17, 2022 Share Posted February 17, 2022 On 2/12/2022 at 8:56 PM, tuanphan said: What is your site url? We can check easier 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! Link to comment
Seanth Posted February 17, 2022 Share Posted February 17, 2022 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> Link to comment
tuanphan Posted February 21, 2022 Share Posted February 21, 2022 Look at your code, you will see max-width:1511 It means, if screen >1511px the code won't work. You can change it to 9511px ☺️ Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Seanth Posted February 23, 2022 Share Posted February 23, 2022 On 2/21/2022 at 2:37 PM, tuanphan said: Look at your code, you will see max-width:1511 It means, if screen >1511px the code won't work. You can change it to 9511px ☺️ OMG! It works like magic! Thank you soooo much ! Link to comment
AmoryLujo Posted January 23 Share Posted January 23 Hello everyone. Same problem, the 2 links that are inside the "Films" folder are not displayed but only in the mobile view and only browsing in English language. On Mobil Spanish browsing and on Desktop (English and Spanish) they are displayed correctly Here the site: https://amorylujo.squarespace.com/ Password: Amor And here the code I copy/paste for the English pages <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} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(1) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(2) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(3) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(4) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(5) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(6) {display:none}} </style> Is the same Issue: On 1/10/2021 at 3:53 AM, tuanphan said: Mobile has same class: nav item - nav dropdown item. Target this class for nav items. nav>div:first-child .header-menu-nav-item:nth-child(8) { display: none; } Do similar for other items. Shoul I change this @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(6) {display:none}} Whit something like this: @media screen and (max-width:1511px){#header nav>div:first-child .header-menu-nav-item:nth-child(6) {display:none}} Any possible help will be greatly appreciated. A&L Link to comment
tuanphan Posted January 28 Share Posted January 28 On 1/24/2024 at 1:33 AM, AmoryLujo said: Hello everyone. Same problem, the 2 links that are inside the "Films" folder are not displayed but only in the mobile view and only browsing in English language. On Mobil Spanish browsing and on Desktop (English and Spanish) they are displayed correctly Here the site: https://amorylujo.squarespace.com/ Password: Amor And here the code I copy/paste for the English pages <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} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(1) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(2) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(3) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(4) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(5) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(6) {display:none}} </style> Is the same Issue: Shoul I change this @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(6) {display:none}} Whit something like this: @media screen and (max-width:1511px){#header nav>div:first-child .header-menu-nav-item:nth-child(6) {display:none}} Any possible help will be greatly appreciated. A&L Change this code <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} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(1) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(2) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(3) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(4) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(5) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(6) {display:none}} </style> to this <style> div.header-nav-item:nth-child(-n+6) { display: none; } [data-folder="root"]>div:first-child>div:first-child>div:nth-child(-n+6) { display: none; } </style> AmoryLujo 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
AmoryLujo Posted January 28 Share Posted January 28 7 hours ago, tuanphan said: Change this code <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} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(1) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(2) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(3) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(4) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(5) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(6) {display:none}} </style> to this <style> div.header-nav-item:nth-child(-n+6) { display: none; } [data-folder="root"]>div:first-child>div:first-child>div:nth-child(-n+6) { display: none; } </style> Good morning Tuanphan, It worked perfect. I passed it on each page of English and that's it. Bravo once again and thank you for all your help. I hope it's not too much to ask of you if you can give us your opinion in this other problem I´m having on my site. Your opinion is greatly valued. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment