Graphicaljordan Posted December 14, 2022 Share Posted December 14, 2022 Hi, I am having issues with some custom code I applied to my site to split the menu navigation with the logo in the centre. This works well until the screen size is smaller (under 1000px wide) when the headers start to butt together and fall out of place. Is there a way to have the mobile header jump in before this happens? This is the code I used: /*Make split navigation*/ @media screen and (min-width: 1000px){ .header-nav { position: absolute; top: 5px; bottom: 0; margin-top: 50px!important; margin-left: -100px!important; } Site is:https://fox-beagle-3wxe.squarespace.com/ PW: bostock Thanks! Link to comment
tuanphan Posted December 17, 2022 Share Posted December 17, 2022 Hi, You can consider using this code. You can remove your CSS code, then we can adjust below code on your site 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
Graphicaljordan Posted December 20, 2022 Author Share Posted December 20, 2022 Hi, Thanks for replying. I added the code injection to the 'Header' section and removed the previous code from the custom CSS. However this is the result I got: Any other way to split the navigation? Thanks, Jordan Link to comment
Graphicaljordan Posted December 20, 2022 Author Share Posted December 20, 2022 Hi, I think I've found a work around for this by defaulting to mobile menu for smaller screens at max-width:1450px. However, I'm now trying to work out how to keep the cart icon and re-centre the logo if you can help with that? Thanks, Jordan Link to comment
Graphicaljordan Posted December 20, 2022 Author Share Posted December 20, 2022 Solved, thanks! 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