raisincosplay Posted November 16 Share Posted November 16 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: Link to comment
tuanphan Posted November 17 Share Posted November 17 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 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
raisincosplay Posted November 17 Author Share Posted November 17 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 Link to comment
Solution tuanphan Posted November 19 Solution Share Posted November 19 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 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
raisincosplay Posted November 19 Author Share Posted November 19 Thank you, tuanphan! For anyone reading, this solution forces a burger menu for smaller screens. I just adjusted the max-width. 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