dovely Posted February 16, 2021 Share Posted February 16, 2021 @tuanphan oh my gosh! That worked perfectly, thank you SOOO much :)! Link to comment
smiliezz Posted March 17, 2021 Share Posted March 17, 2021 I've tried all the codes and none are working for me.... my site is - https://thewellnessdiva.squarespace.com/ and the password is LetMeIn! I would like my nav to go all the way across the screen. The latest code i tried was this -- .header-title-nav-wrapper { flex: 1 0 90%; } .header-layout-nav-center .header-nav { width: 100% !important; flex: 1 1 100%; } Thanks!!! Link to comment
tuanphan Posted March 24, 2021 Share Posted March 24, 2021 On 3/17/2021 at 3:57 PM, smiliezz said: I've tried all the codes and none are working for me.... my site is - https://thewellnessdiva.squarespace.com/ and the password is LetMeIn! I would like my nav to go all the way across the screen. The latest code i tried was this -- .header-title-nav-wrapper { flex: 1 0 90%; } .header-layout-nav-center .header-nav { width: 100% !important; flex: 1 1 100%; } Thanks!!! Hi, Use this new code /* nav one line */ .header-title-nav-wrapper { flex: 0 0 90% !important; } smiliezz 1 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!) Link to comment
dovely Posted April 9, 2021 Share Posted April 9, 2021 @tuanphan I hope you're doing well. I have another site where the text is wrapping, but this time it is in the footer. Do you have any idea on how to prevent this from happening? Let me know. Thank you! Link to comment
tuanphan Posted April 15, 2021 Share Posted April 15, 2021 On 4/10/2021 at 4:25 AM, dovely said: @tuanphan I hope you're doing well. I have another site where the text is wrapping, but this time it is in the footer. Do you have any idea on how to prevent this from happening? Let me know. Thank you! Can you share site url? We can check 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!) Link to comment
dovely Posted April 15, 2021 Share Posted April 15, 2021 @tuanphan Yes it is https://hawk-tomato-czz2.squarespace.com/. Let me know if you need anything else. Thank you! Link to comment
tuanphan Posted April 17, 2021 Share Posted April 17, 2021 On 4/15/2021 at 9:53 PM, dovely said: @tuanphan Yes it is https://hawk-tomato-czz2.squarespace.com/. Let me know if you need anything else. Thank you! Hi. What is password? 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!) Link to comment
dovely Posted April 19, 2021 Share Posted April 19, 2021 @tuanphanit is Doves2021! Let me know if you have any other questions. Thank you! Link to comment
tuanphan Posted April 21, 2021 Share Posted April 21, 2021 On 4/19/2021 at 9:52 PM, dovely said: @tuanphanit is Doves2021! Let me know if you have any other questions. Thank you! Add to Design > Custom CSS /* prevent footer links wrap */ div#block-yui_3_17_2_1_1617309994354_19586 a { white-space: nowrap; } The header looks big on scroll. Do you want to reduce header on scroll? 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!) Link to comment
dovely Posted April 21, 2021 Share Posted April 21, 2021 @tuanphan yes please that would be great as well. Thank you! Link to comment
tuanphan Posted April 22, 2021 Share Posted April 22, 2021 18 hours ago, dovely said: @tuanphan yes please that would be great as well. Thank you! Add to Design > Custom CSS /* Make image smaller on scroll */ header#header img { transition: all 0.3s; } .shrink img { max-height: 120px; transition: all 0.3s; } 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!) Link to comment
dovely Posted April 22, 2021 Share Posted April 22, 2021 @tuanphanOh my gosh thank you so much. These are working beautifully! Link to comment
otmeg Posted July 5, 2021 Share Posted July 5, 2021 On 9/30/2020 at 12:00 PM, hellothisisjeff said: I was having this same issue on a 7.1 site with a centered nav. I wrote this CSS and dropped it into the Custom CSS section which seems to solve the issue. // Header Nav Width Adjustment .header-layout-branding-center-nav-center .header-title-nav-wrapper { flex: 2 0 100%; } .header-layout-branding-center-nav-center .header-actions--right { position: relative; right: 4vw; } The first value in the flex property basically tells the div holding the nav to grow to fill the space. However, this seemed to push the right side action buttons (cart icon, in my case) off the screen a bit, so I added the next line of code to move it back into place. A little bit of a hack job, but gets the job done. hellothisisjeff: HERO, thank you hellothisisjeff 1 Link to comment
Flutes_Flutists Posted July 28, 2021 Share Posted July 28, 2021 (edited) On 10/7/2020 at 6:51 PM, tuanphan said: Add to Home > Design > Custom CSS .header-nav { width: 90% !important; flex: 1 1 90% !important; } I tried this code and it got rid of the second line in the header on smaller screens (such as an iPad Pro 12.9) but it also pulled all the menu buttons to the left (they shoudl ideally be in the middle). I tried some of the other codes to get them back to the middle but then they knocked the buttons on the right out of the screen. Do you have any suggestions? Site is https://raccoon-radish-ytrb.squarespace.com/ Passcode is flutesandflutists Edited July 28, 2021 by Flutes_Flutists Link to comment
tuanphan Posted July 29, 2021 Share Posted July 29, 2021 On 7/28/2021 at 7:35 AM, Flutes_Flutists said: I tried this code and it got rid of the second line in the header on smaller screens (such as an iPad Pro 12.9) but it also pulled all the menu buttons to the left (they shoudl ideally be in the middle). I tried some of the other codes to get them back to the middle but then they knocked the buttons on the right out of the screen. Do you have any suggestions? Site is https://raccoon-radish-ytrb.squarespace.com/ Passcode is flutesandflutists Don't remove any code. Add this code nav.header-nav-list { justify-content: flex-end !important; display: flex; } Flutes_Flutists 1 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!) Link to comment
Flutes_Flutists Posted July 30, 2021 Share Posted July 30, 2021 23 hours ago, tuanphan said: Don't remove any code. Add this code nav.header-nav-list { justify-content: flex-end !important; display: flex; } That worked perfectly, thank you so much! Link to comment
Sandra_Keus Posted October 11, 2021 Share Posted October 11, 2021 Hey guys, I tried all the codes mentioned in previous posts, but nothing seemed to work for this 7.1 site: https://hotel-bries.squarespace.com/ Is there anyone who can help me with preventing this navigation from stacking on desktop AND keeping it centered? Thanks in advance! Sandra Keus | Square It Up Based in Portugal, from The Netherlands, working world wide. 👩🏻💻 squareitup.co/en/portfolio ✉️ sandra@squareitup.co Link to comment
tuanphan Posted October 13, 2021 Share Posted October 13, 2021 On 10/11/2021 at 7:19 PM, sandrakeus said: Hey guys, I tried all the codes mentioned in previous posts, but nothing seemed to work for this 7.1 site: https://hotel-bries.squarespace.com/ Is there anyone who can help me with preventing this navigation from stacking on desktop AND keeping it centered? Thanks in advance! Try this .header-layout-nav-center .header-nav-list { flex-wrap: nowrap; } MartinMurray 1 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!) Link to comment
RolandFuseHub Posted February 12, 2022 Share Posted February 12, 2022 On 10/13/2021 at 12:38 AM, tuanphan said: Try this .header-layout-nav-center .header-nav-list { flex-wrap: nowrap; } Hi @tuanphan, Like the others I have tried all or combinations of the codes on this thread. Some work, but screw up the position of the Hamburger Menu on mobile. Others look perfect on all devices, but I end up with an off-center bar. Could you take a peek? Site: https://devspringford.squarespace.com/?password=sneakpeek I use this CSS: /* nav one line */ .header-title-nav-wrapper { flex: 0 0 90% !important; } .nav.header-nav-list { justify-content: flex-end !important; display: flex; } And have set the header to this setting: Note: I have hid the logo on the homepage. Thanks, Roland I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10. Link to comment
tuanphan Posted February 14, 2022 Share Posted February 14, 2022 On 2/12/2022 at 10:50 PM, RolandFuseHub said: Hi @tuanphan, Like the others I have tried all or combinations of the codes on this thread. Some work, but screw up the position of the Hamburger Menu on mobile. Others look perfect on all devices, but I end up with an off-center bar. Could you take a peek? Site: https://devspringford.squarespace.com/?password=sneakpeek I use this CSS: /* nav one line */ .header-title-nav-wrapper { flex: 0 0 90% !important; } .nav.header-nav-list { justify-content: flex-end !important; display: flex; } And have set the header to this setting: Note: I have hid the logo on the homepage. Thanks, Roland Add this CSS nav.header-nav-list { flex-wrap: nowrap; } 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!) Link to comment
RolandFuseHub Posted February 14, 2022 Share Posted February 14, 2022 1 hour ago, tuanphan said: Add this CSS nav.header-nav-list { flex-wrap: nowrap; } Hi @tuanphan, That worked in one way, but not in another: centre. As you will see it doesn't stack on narrower screens, but it shifts the whole nav bar to the left. Any solution that comes to mind? I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10. Link to comment
tuanphan Posted February 19, 2022 Share Posted February 19, 2022 On 2/14/2022 at 11:47 AM, RolandFuseHub said: Hi @tuanphan, That worked in one way, but not in another: centre. As you will see it doesn't stack on narrower screens, but it shifts the whole nav bar to the left. Any solution that comes to mind? Try this new code nav.header-nav-list { flex-wrap: nowrap; position: absolute; left: 50%; transform: translateX(-50%); } RolandFuseHub 1 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!) Link to comment
RolandFuseHub Posted February 20, 2022 Share Posted February 20, 2022 On 2/18/2022 at 9:34 PM, tuanphan said: Try this new code nav.header-nav-list { flex-wrap: nowrap; position: absolute; left: 50%; transform: translateX(-50%); } That worked beautifully! Thanks @tuanphan I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10. Link to comment
Wryn Posted March 1, 2023 Share Posted March 1, 2023 I have two things I am working on regarding the sub-navigation for Squarespace 7.0 Tremont template. 1. Having the same issue but with sub-navigation. I don't want the text to wrap when stacked. (see the first screenshot). I want the titles of the pages to be all on one line. 2. I am also looking for the sub-navigation to be horizontal instead of vertical. I've gotten this far (see the second screenshot) and am hoping that removing the text wrap will also solve the awkwardness of the horizontal menu. Unless there is a better code. Looking for it to be similar to this site: http://baralaye.com/work The CSS code I put in for the horizontal menu is : /* Nav dropdown */ .subnav { width: 100% !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; justify-content: flex-end; } .subnav { margin-right: 30px; top: 30px; } .subnav { position: static; } .subnav { flex-wrap: nowrap; } Link to comment
tuanphan Posted March 6, 2023 Share Posted March 6, 2023 On 3/2/2023 at 4:35 AM, Wryn said: I have two things I am working on regarding the sub-navigation for Squarespace 7.0 Tremont template. 1. Having the same issue but with sub-navigation. I don't want the text to wrap when stacked. (see the first screenshot). I want the titles of the pages to be all on one line. 2. I am also looking for the sub-navigation to be horizontal instead of vertical. I've gotten this far (see the second screenshot) and am hoping that removing the text wrap will also solve the awkwardness of the horizontal menu. Unless there is a better code. Looking for it to be similar to this site: http://baralaye.com/work The CSS code I put in for the horizontal menu is : /* Nav dropdown */ .subnav { width: 100% !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; justify-content: flex-end; } .subnav { margin-right: 30px; top: 30px; } .subnav { position: static; } .subnav { flex-wrap: nowrap; } What is your site url? We can check 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!) 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