michael2019 Posted October 29, 2020 Share Posted October 29, 2020 Site URL: https://tarantula-quillfish-w6xe.squarespace.com/ The navigation in the header moves to two lines even though there is room on the page when the page gets smaller. How do I increase the padding so it stays on one line longer? URL: https://tarantula-quillfish-w6xe.squarespace.com/ PW: !GCet0@E#8 Thanks. bangank36 1 Link to comment
0 bangank36 Posted October 30, 2020 Share Posted October 30, 2020 I change flex size to 100%, feel free to place it in custom css .header-layout-branding-center-nav-center .header-title-nav-wrapper { flex: 0 0 100%; } Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for SquarespaceIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
0 hboss22 Posted October 30, 2020 Share Posted October 30, 2020 I'm having the same problem with my navigation stacking when a browser window is smaller. Is there a way to have the scale of the words go smaller to accomodate a smaller browser size so that the stacking does not occur? bangank36 1 Link to comment
0 bangank36 Posted October 30, 2020 Share Posted October 30, 2020 1 hour ago, hboss22 said: I'm having the same problem with my navigation stacking when a browser window is smaller. Is there a way to have the scale of the words go smaller to accomodate a smaller browser size so that the stacking does not occur? kindly provide your current site url so we can check Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for SquarespaceIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
0 hboss22 Posted October 30, 2020 Share Posted October 30, 2020 10 minutes ago, bangank36 said: kindly provide your current site url so we can check its www.fromyourmuse.com bangank36 1 Link to comment
0 michael2019 Posted October 30, 2020 Author Share Posted October 30, 2020 That did it. Thank you. bangank36 1 Link to comment
0 bangank36 Posted October 30, 2020 Share Posted October 30, 2020 45 minutes ago, hboss22 said: its www.fromyourmuse.com /* Add this to Settings -> Design -> Custom Css */ @media only screen and (min-width: 960px) and (max-width: 1200px) { .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item { font-size: 0.5em; margin-left: .3vw; } } Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for SquarespaceIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
0 hboss22 Posted October 30, 2020 Share Posted October 30, 2020 1 hour ago, bangank36 said: /* Add this to Settings -> Design -> Custom Css */ @media only screen and (min-width: 960px) and (max-width: 1200px) { .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item { font-size: 0.5em; margin-left: .3vw; } } That worked! Thank you so much! bangank36 1 Link to comment
0 atanasmalamov Posted November 12, 2020 Share Posted November 12, 2020 Hi guys! I am experiencing the same problem. (https://atanasmalamov.com) i tried the solutions above but did not work for me, any other workaround? Thank you bangank36 1 Link to comment
0 tuanphan Posted November 14, 2020 Share Posted November 14, 2020 On 11/13/2020 at 2:38 AM, atanasmalamov said: Hi guys! I am experiencing the same problem. (https://atanasmalamov.com) i tried the solutions above but did not work for me, any other workaround? Thank you I think the code worked. Can you take a screenshot/which screen size do you use? 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
0 atanasmalamov Posted November 14, 2020 Share Posted November 14, 2020 12 hours ago, tuanphan said: I think the code worked. Can you take a screenshot/which screen size do you use? bangank36 1 Link to comment
0 bangank36 Posted November 15, 2020 Share Posted November 15, 2020 /* Add this to Settings -> Design -> Custom Css */ @media only screen and (min-width: 768px) and (max-width: 1200px) { .Header-branding img { max-width: 220px; } .tweak-header-primary-nav-hover-style-fade .Header-nav .Header-nav-inner { text-align: center; } [data-nc-base="header"] [data-nc-container="top-right"] [data-nc-element="primary-nav"] { width: 100vw; position: absolute; bottom: -5px; display: block; left: 0; } [data-nc-base="header"] [data-nc-group="top"] { position: relative; } } Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for SquarespaceIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
0 atanasmalamov Posted November 15, 2020 Share Posted November 15, 2020 (edited) 4 hours ago, bangank36 said: /* Add this to Settings -> Design -> Custom Css */ @media only screen and (min-width: 768px) and (max-width: 1200px) { .Header-branding img { max-width: 220px; } .tweak-header-primary-nav-hover-style-fade .Header-nav .Header-nav-inner { text-align: center; } [data-nc-base="header"] [data-nc-container="top-right"] [data-nc-element="primary-nav"] { width: 100vw; position: absolute; bottom: -5px; display: block; left: 0; } [data-nc-base="header"] [data-nc-group="top"] { position: relative; } } Thank you! That worked. Do you think there is anyway to keep the navigation in one line with the logo and cart? Edited November 15, 2020 by atanasmalamov bangank36 1 Link to comment
0 bangank36 Posted November 15, 2020 Share Posted November 15, 2020 6 minutes ago, atanasmalamov said: Thank you! That worked. Do you think there is anyway to keep the navigation in one line with the logo and cart? I dont, since you have much items in the nav, so i break it 2 lines on smaller screen Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for SquarespaceIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
0 LinneaN Posted March 2, 2021 Share Posted March 2, 2021 Hi, I need help with my website, I am having a similar issue with the menu breaking into two lines: https://www.arcticpeoples.com/ Link to comment
0 tuanphan Posted March 6, 2021 Share Posted March 6, 2021 On 3/2/2021 at 8:08 PM, LinneaN said: Hi, I need help with my website, I am having a similar issue with the menu breaking into two lines: https://www.arcticpeoples.com/ Add to Design > Custom CSS #header .site-title { width: 10%; } #desktopNav { width: 90% !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
0 LinneaN Posted March 7, 2021 Share Posted March 7, 2021 Great, that fixed it. Thank you so much @tuanphan! bangank36 1 Link to comment
0 Botond Posted April 15, 2021 Share Posted April 15, 2021 (edited) Hi. We have the same issue on smaller screens. The menu is breaking down in 2 lines. Can anybody help us out? https://www.arbuckles.ch Edited April 15, 2021 by Botond Link to comment
0 tuanphan Posted April 17, 2021 Share Posted April 17, 2021 On 4/16/2021 at 12:49 AM, Botond said: Hi. We have the same issue on smaller screens. The menu is breaking down in 2 lines. Can anybody help us out? https://www.arbuckles.ch Hi. Add to Design > Custom CSS /* nav same line */ .Header-nav-inner { -ms-flex-wrap: nowrap; flex-wrap: nowrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 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
0 mryanhardy Posted September 13, 2021 Share Posted September 13, 2021 @tuanphan Hello, hope you're having a great day. I'm working on a site and having similar issues. I can't get the tablet navbar all on one line like the desktop version. Or, alternatively, I can't get the tablet version to have the hamburger like the mobile version. You'll have to go to any page other than landing to see. https://www.acqueenb.com/contact That's one page. I've tried the tricks above and just changing the breakpoint. This is Brine 7.0 btw. Separate issue, I can't get the header background image I have showing for tablet and desktop to show in mobile unless I change the breakpoint super low to 375px or lower, but then that messes up the mobile nav bar. Any chance you have an idea for that? And then lastly, 3rd issue - I can't get the gallery in the footer with the 7 logos to be smaller and not so big in tablet and mobile view. You see how long the mobile footer view is? The logos in the gallery are huge. Any help you can offer would be amazing. Thanks so much!!! Link to comment
0 tuanphan Posted September 15, 2021 Share Posted September 15, 2021 On 9/13/2021 at 3:48 PM, mryanhardy said: @tuanphan Hello, hope you're having a great day. I'm working on a site and having similar issues. I can't get the tablet navbar all on one line like the desktop version. Or, alternatively, I can't get the tablet version to have the hamburger like the mobile version. You'll have to go to any page other than landing to see. https://www.acqueenb.com/contact That's one page. I've tried the tricks above and just changing the breakpoint. This is Brine 7.0 btw. Separate issue, I can't get the header background image I have showing for tablet and desktop to show in mobile unless I change the breakpoint super low to 375px or lower, but then that messes up the mobile nav bar. Any chance you have an idea for that? And then lastly, 3rd issue - I can't get the gallery in the footer with the 7 logos to be smaller and not so big in tablet and mobile view. You see how long the mobile footer view is? The logos in the gallery are huge. Any help you can offer would be amazing. Thanks so much!!! It looks like you solved this? 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
0 MP_CE Posted December 9, 2021 Share Posted December 9, 2021 @bangank36@tuanpahn: Thank you for already helping so many people out. I am struggling with a similar problem but none of the code was able to fix it. The website is engage-eu.eu and there should be enough room to move everything into one row in the header. I am using the header layout "logo - links centered - button". Thanks a lot in advance! Link to comment
0 bangank36 Posted December 9, 2021 Share Posted December 9, 2021 46 minutes ago, MP_CE said: @bangank36@tuanpahn: Thank you for already helping so many people out. I am struggling with a similar problem but none of the code was able to fix it. The website is engage-eu.eu and there should be enough room to move everything into one row in the header. I am using the header layout "logo - links centered - button". Thanks a lot in advance! Try adding to your Home > Design > Custom Css .header-nav { position: absolute; width: 60vw !important; left: 50%; transform: translateX(-50%); } .header-actions--right { width: 20vw !important; } Let me know how it works on your site Support me by pressing 👍 if this useful for you Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for SquarespaceIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
0 bluskeyes Posted January 22 Share Posted January 22 I have this same problem. I've tried to copy and paste some of the codes here, but don't really know what I'm doing... any assistance would be greatly appreciated. thanks Link to comment
0 tuanphan Posted January 25 Share Posted January 25 On 1/22/2022 at 8:30 PM, bluskeyes said: I have this same problem. I've tried to copy and paste some of the codes here, but don't really know what I'm doing... any assistance would be greatly appreciated. thanks What is your 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
0 LeauxFi Posted February 21 Share Posted February 21 Hello, my website is doing the same thing. On my left screen the navigation is fine, but on the right screen my navigation is stacked. thetenmg.com I've tried EVERY code linked here. The only one that seemed to force it to move was the one below, however it shifted the logo in the center and broke the navigation so that none of the links were active anymore. Can anyone help me fix the stacking issue? .header-nav { position: absolute; width: 60vw !important; left: 50%; transform: translateX(-50%); } .header-actions--right { width: 20vw !important; } Link to comment
Question
michael2019
Site URL: https://tarantula-quillfish-w6xe.squarespace.com/
The navigation in the header moves to two lines even though there is room on the page when the page gets smaller. How do I increase the padding so it stays on one line longer?
URL: https://tarantula-quillfish-w6xe.squarespace.com/
PW: !GCet0@E#8
Thanks.
Link to comment
Top Posters For This Question
9
8
3
4
Popular Days
Oct 30
7
Feb 22
4
Nov 15
3
Apr 5
2
Top Posters For This Question
tuanphan 9 posts
bangank36 8 posts
hboss22 3 posts
Kath_HampersFor 4 posts
Popular Days
Oct 30 2020
7 posts
Feb 22 2022
4 posts
Nov 15 2020
3 posts
Apr 5 2022
2 posts
Popular Posts
michael2019
Site URL: https://tarantula-quillfish-w6xe.squarespace.com/ The navigation in the header moves to two lines even though there is room on the page when the page gets smaller. How do I increase the pa
hboss22
I'm having the same problem with my navigation stacking when a browser window is smaller. Is there a way to have the scale of the words go smaller to accomodate a smaller browser size so that the stac
hboss22
its www.fromyourmuse.com
Posted Images
37 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment