raisincosplay Posted November 16, 2023 Posted November 16, 2023 Currently, my header nav looks like this on tablets, where the links move to a second line: Is it possible to instead shrink the nav wrapper to still fit on one line on smaller monitors and tablets? Here's what it looks like on larger screens:
tuanphan Posted November 17, 2023 Posted November 17, 2023 Hi, We can use code to reduce logo + nav items a bit, if you share site url, we can help 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!)
raisincosplay Posted November 17, 2023 Author Posted November 17, 2023 11 hours ago, tuanphan said: Hi, We can use code to reduce logo + nav items a bit, if you share site url, we can help easier Apologies! raisincosplay.com
Solution tuanphan Posted November 19, 2023 Solution Posted November 19, 2023 Use this code to Website > Website Tools > Custom CSS @media screen and (min-width:1025px) and (max-width:1197px) { .header-burger { display: flex !important } .header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important } .header-nav,.header-actions { visibility: hidden !important } } I see problem between 1025px to 1197px so I use this code, you can adjust numbers 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!)
raisincosplay Posted November 19, 2023 Author Posted November 19, 2023 Thank you, tuanphan! For anyone reading, this solution forces a burger menu for smaller screens. I just adjusted the max-width.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment