dv_louise_designs Posted July 21, 2022 Share Posted July 21, 2022 Site URL: https://caribou-orchid-afd2.squarespace.com/ Hi, I am hoping to make my client's website's header look like the layout below: How can I code it to reflect that? **Also, is there a way to make the social links closer together, but not the navigation links? Thank you! Link to comment
Beyondspace Posted July 22, 2022 Share Posted July 22, 2022 13 hours ago, dv_louise_designs said: Site URL: https://caribou-orchid-afd2.squarespace.com/ Hi, I am hoping to make my client's website's header look like the layout below: How can I code it to reflect that? **Also, is there a way to make the social links closer together, but not the navigation links? Thank you! 1. Kindly try using this header layout 2. Adding to Home > Design > Custom Css .header-nav { position: absolute; top: 5px; bottom: 0; margin-top: 0!important; margin-left: -50px!important; } .header-nav-item:nth-of-type(2) { margin-right: 340px!important; } .header-title-logo a { z-index: 1000; position: relative; } Let me know how it works on your site BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) 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
dv_louise_designs Posted July 24, 2022 Author Share Posted July 24, 2022 On 7/22/2022 at 9:41 AM, bangank36 said: 2. Adding to Home > Design > Custom Css .header-nav { position: absolute; top: 5px; bottom: 0; margin-top: 0!important; margin-left: -50px!important; } .header-nav-item:nth-of-type(2) { margin-right: 340px!important; } .header-title-logo a { z-index: 1000; position: relative; } Let me know how it works on your site Hey @bangank36! It worked well, except when I shrink my window to a certain size and below it condenses too much with unwanted overlap. I also adjusted your code slightly, let me know what you think! Updated code: .header-nav { position: absolute; top: 10px; bottom: 0; margin-top: 0px!important; margin-left: 60px!important; } .header-nav-item:nth-of-type(2) { margin-right: 350px!important; } tuanphan and Beyondspace 2 Link to comment
tuanphan Posted July 26, 2022 Share Posted July 26, 2022 I still see problem on some screen sizes. You can consider forcing mobile menu on small screen sizes. If you want this, we can check give the code 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
dv_louise_designs Posted July 27, 2022 Author Share Posted July 27, 2022 @tuanphan That would be so helpful, thank you! The breakpoint seems to be at a higher pixel size than standard mobile, so I wasn't quite sure how to do that or what those breakpoints were. Thank you! Link to comment
tuanphan Posted July 28, 2022 Share Posted July 28, 2022 19 hours ago, dv_louise_designs said: @tuanphan That would be so helpful, thank you! The breakpoint seems to be at a higher pixel size than standard mobile, so I wasn't quite sure how to do that or what those breakpoints were. Thank you! Add this CSS. You can adjust 1150 number @media screen and (min-width:992px) and (max-width:1150px) { /* 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; } .header-title-nav-wrapper { justify-content: flex-start !important; align-items: flex-start !important; margin-left: 0 !important; flex: 0 0 calc(~"100% - 50px") !Important; text-align: left !important; } .header-title { text-align: left !important; } } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment