NathalieSR Posted January 16 Share Posted January 16 Hi all, I am having issues with my mobile navigation. I have a drop down menu, and on mobile - only some of the items from the drop down show up. My website is in english and german, on the english mobile navigation 3 out of 4 pages that are placed inside a folder show up, on the german one only 1 out of 4 is visible. On the english pages, the last folder item is missing and on the german pages only the last item in the folder is showing. On desktop it works perfectly. I have not tinkered with the code for said drop down apart from changing its background, text colour and text alignment. Does anyone know how to solve this and have all folder items showing up as they should also on mobile? My website is live here https://www.nathmakesthings.com/home-eng Link to comment
Solution NathalieSR Posted January 17 Author Solution Share Posted January 17 (edited) I have kind of figured it out - but not fully I can force the folder open on mobile on each page with a piece of code. This however only works on some of the pages? On all my german pages it works fine, but on all english pages only 3 out of 4 pages still show up on mobile with the same piece of code applied to those pages. This is the code I'm using <style> [data-folder="/Services"] div { display: block !important; } </style> Edited January 17 by NathalieSR Link to comment
PerfectCaptureBooth Posted August 4 Share Posted August 4 Did you ever fully solve this? I have english and spanish pages and I just realized I have the same issue out of nowhere Link to comment
tuanphan Posted August 4 Share Posted August 4 1 hour ago, PerfectCaptureBooth said: Did you ever fully solve this? I have english and spanish pages and I just realized I have the same issue out of nowhere What is your site url? We can check problem easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
PerfectCaptureBooth Posted August 5 Share Posted August 5 Yes, it's perfectcapturebooth.com For English pages, it seems the "Home" and "About Us" are missing on the mobile version menu And on the Spanish pages, it seems "Reserva" and a few other pages seem to go missing. This is the code that Im using : <style> #header .header-nav-item:nth-child(2){ display:none } #header .header-nav-item:nth-child(3){ display:none } </style> <style> @media screen and (max-width:1511px){ #header .header-menu-nav-item:nth-child(2){ display:none } #header .header-menu-nav-item:nth-child(3){ display:none } </style> Link to comment
tuanphan Posted August 6 Share Posted August 6 12 hours ago, PerfectCaptureBooth said: Yes, it's perfectcapturebooth.com For English pages, it seems the "Home" and "About Us" are missing on the mobile version menu And on the Spanish pages, it seems "Reserva" and a few other pages seem to go missing. This is the code that Im using : <style> #header .header-nav-item:nth-child(2){ display:none } #header .header-nav-item:nth-child(3){ display:none } </style> <style> @media screen and (max-width:1511px){ #header .header-menu-nav-item:nth-child(2){ display:none } #header .header-menu-nav-item:nth-child(3){ display:none } </style> You can use this new approach Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
PerfectCaptureBooth Posted August 14 Share Posted August 14 (edited) Hey man sorry for barely getting to this! So I tried this code, for the desktop it works, but for mobile nothing is happening at all. Not sure if I'm inputting it wrong or something. This is how I inserted it: <style> /* hide items on desktop */ nav.header-nav-list>div:nth-child(2), nav.header-nav-list>div:nth-child(3) { display: none; } /* hide items on mobile */ [data-folder="root"]>div:first-child>div:nth-child(2), [data-folder="root"]>div:first-child>div:nth-child(3), { display: none; } </style> Edited August 14 by PerfectCaptureBooth Link to comment
PerfectCaptureBooth Posted August 14 Share Posted August 14 Update : So I'm trying this code instead, where I changed the "hide items on mobile " coding completely. And so far, this seems to work correctly. <style> /* hide items on desktop */ nav.header-nav-list>div:nth-child(2), nav.header-nav-list>div:nth-child(3) { display: none; } /* hide items on mobile */ .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(2), .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(3) { display: none !important; } </style> tuanphan 1 Link to comment
tuanphan Posted August 15 Share Posted August 15 On 8/14/2023 at 8:57 AM, PerfectCaptureBooth said: Update : So I'm trying this code instead, where I changed the "hide items on mobile " coding completely. And so far, this seems to work correctly. <style> /* hide items on desktop */ nav.header-nav-list>div:nth-child(2), nav.header-nav-list>div:nth-child(3) { display: none; } /* hide items on mobile */ .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(2), .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(3) { display: none !important; } </style> Did you solve all or still need help? PerfectCaptureBooth 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
PerfectCaptureBooth Posted August 16 Share Posted August 16 Solved it all! Thanks! tuanphan 1 Link to comment
PerfectCaptureBooth Posted October 11 Share Posted October 11 On 8/15/2023 at 3:22 AM, tuanphan said: Did you solve all or still need help? Updating, this code is no longer working for mobile, any solution? /* hide items on mobile */ .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(2), .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(3) { display: none !important; } </style> Link to comment
tuanphan Posted October 12 Share Posted October 12 On 10/11/2023 at 11:17 AM, PerfectCaptureBooth said: Updating, this code is no longer working for mobile, any solution? /* hide items on mobile */ .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(2), .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(3) { display: none !important; } </style> Change it to this /* hide items on mobile */ [data-folder="root"]>div:first-child>div:first-child>div:nth-child(2), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(3) { display: none !important; } </style> PerfectCaptureBooth 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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