MavisChen Posted July 8, 2022 Share Posted July 8, 2022 Site URL: https://www.virginiachen.com/ Site: https://www.virginiachen.com/ Looking for Help on CSS: 1. A full drop down menu that covers the whole page like how a default burger works on mobile. (E.g. HERE) 2. On top of Q1, would it be possible to stylise the full-page drop down as a blur to the background effect, and have all the page links on the right hand side? 3. If all of those above possible, how do I make the design consistent on mobile? TIA! 😊 www.wavymavy.com Link to comment
tuanphan Posted July 9, 2022 Share Posted July 9, 2022 Add to Design > Custom CSS /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* 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; } } 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
MavisChen Posted July 10, 2022 Author Share Posted July 10, 2022 On 7/9/2022 at 5:12 AM, tuanphan said: Add to Design > Custom CSS /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* 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; } } Hi Tuanphan, thanks so much for the code. On top of that, how could I include this bit of code (that you wrote on another post of mine) to hide the extra layer clicks? TIA. @media screen and (max-width:991px) { .header-menu-nav-folder { transform: unset !important; } .header-menu-controls.container.header-menu-nav-item { display: none; } [data-folder="root"]>.header-menu-nav-folder-content:first-child { display: none; }} www.wavymavy.com Link to comment
tuanphan Posted July 11, 2022 Share Posted July 11, 2022 11 hours ago, MavisChen said: Hi Tuanphan, thanks so much for the code. On top of that, how could I include this bit of code (that you wrote on another post of mine) to hide the extra layer clicks? TIA. @media screen and (max-width:991px) { .header-menu-nav-folder { transform: unset !important; } .header-menu-controls.container.header-menu-nav-item { display: none; } [data-folder="root"]>.header-menu-nav-folder-content:first-child { display: none; }} Change 991px in second code to 9999px MavisChen 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
MavisChen Posted July 15, 2022 Author Share Posted July 15, 2022 On 7/9/2022 at 5:12 AM, tuanphan said: Add to Design > Custom CSS /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* 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; } } Hi Tuanphan, I would like to adjust the spacing (maybe to half of the current size) between those page links (image attached). What code could I add on top of the last code you helped me with? TIA. Mavis www.wavymavy.com Link to comment
tuanphan Posted July 18, 2022 Share Posted July 18, 2022 On 7/15/2022 at 3:53 PM, MavisChen said: Hi Tuanphan, I would like to adjust the spacing (maybe to half of the current size) between those page links (image attached). What code could I add on top of the last code you helped me with? TIA. Mavis Use this /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* 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; } div.container.header-menu-nav-item a { margin-top: 5px; margin-bottom: 5px; } } 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
MavisChen Posted July 18, 2022 Author Share Posted July 18, 2022 4 hours ago, tuanphan said: Use this /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* 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; } div.container.header-menu-nav-item a { margin-top: 5px; margin-bottom: 5px; } } Hello life saver, it's me again. Thanks so much for the code, they worked in terms of adjusting the space between page links. Now I would like to move them up (please see attached image as a reference), could you help me with the CSS please? Thank you so much! www.wavymavy.com Link to comment
tuanphan Posted July 19, 2022 Share Posted July 19, 2022 Edit above code to this /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* 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; } div.container.header-menu-nav-item a { margin-top: 5px; margin-bottom: 5px; } .header-menu-nav-folder-content { justify-content: flex-start; } } (I added .header-menu-nav-folder-content { justify-content: flex-start; }) 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
MavisChen Posted July 20, 2022 Author Share Posted July 20, 2022 18 hours ago, tuanphan said: .header-menu-nav-folder-content { justify-content: flex-start; } } Hey, thanks so much! That code worked to move the links up. How can I move them to the right, so the right side of the links aligns with the right side of the cross? TIA www.wavymavy.com Link to comment
tuanphan Posted July 21, 2022 Share Posted July 21, 2022 23 hours ago, MavisChen said: Hey, thanks so much! That code worked to move the links up. How can I move them to the right, so the right side of the links aligns with the right side of the cross? TIA Add margin-right: 0px; to this code 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment