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. Beyondspace 1 Link to comment
Beyondspace 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 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, Lightbox Studio pluginIf 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
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? Beyondspace 1 Link to comment
Beyondspace 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 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, Lightbox Studio pluginIf 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
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 Beyondspace 1 Link to comment
michael2019 Posted October 30, 2020 Author Share Posted October 30, 2020 That did it. Thank you. Beyondspace 1 Link to comment
Beyondspace 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 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, Lightbox Studio pluginIf 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
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! Beyondspace 1 Link to comment
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 Beyondspace 1 Link to comment
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
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? Beyondspace 1 Link to comment
Beyondspace 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 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, Lightbox Studio pluginIf 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
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 Beyondspace 1 Link to comment
Beyondspace 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 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, Lightbox Studio pluginIf 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
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
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
LinneaN Posted March 7, 2021 Share Posted March 7, 2021 Great, that fixed it. Thank you so much @tuanphan! Beyondspace 1 Link to comment
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
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
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
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
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
Beyondspace 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 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, Lightbox Studio pluginIf 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
bluskeyes Posted January 22, 2022 Share Posted January 22, 2022 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
tuanphan Posted January 25, 2022 Share Posted January 25, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment