DesignPearl Posted April 29 Share Posted April 29 (edited) I need help removing the line break in my navigation menu so that the "about us" remains on the same line as other menu items. I have tired various codes from previous threads, however they result in my logo being mis-aligned from center, and/or my "book now" & instagram buttons being too far over towards the margins. Please help! Also, is there a way to make he vertical line over the crown shorter on just the mobile version? It looks fine on desktop, but on mobile I want the vertical line to hover only over the crown (not extend beyond it). https://www.beautifulyoutanning.com Thanks so much for any help! 😊 Edited May 21 by DesignPearl Link to comment
Beyondspace Posted April 30 Share Posted April 30 6 hours ago, DesignPearl said: I need help removing the line break in my navigation menu so that the "about us" remains on the same line as other menu items. I have tired various codes from previous threads, however they result in my logo being mis-aligned from center, and/or my "book now" & instagram buttons being too far over towards the margins. Please help! Also, is there a way to make he vertical line over the crown shorter on just the mobile version? It looks fine on desktop, but on mobile I want the vertical line to hover only over the crown (not extend beyond it). Thanks so much for any help! 😊 Can you share your URL site so I can check it easier? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
DesignPearl Posted May 21 Author Share Posted May 21 @Beyondspace the url is www.beautifulyoutanning.com. Thanks for your help! Link to comment
Solution Beyondspace Posted May 22 Solution Share Posted May 22 (edited) You can try the following Custom css for header @media only screen and (min-width: 1024px) { .header-nav-wrapper { position: relative; } .header-nav-list { position: absolute; width: 120%; left: 50%; transform: translateX(-50%); } } My testing Edited May 22 by Beyondspace BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted May 22 Share Posted May 22 For the verticle line, you can try the following custom CSS to set on mobile view @media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1697177967345_17262 .sqs-block-content { height: 100%; display: flex; align-items: center; } .fe-6528e2ef5285c047c46cc42d .fe-block:first-child{ grid-area: 1 / 1 / 8 / 11; } .fe-6528e2ef5285c047c46cc42d .fe-block:first-child .vertical-line{ height: 150px; } } My testing BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. 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