CMurphy Posted September 15, 2020 Share Posted September 15, 2020 Hi Guys, I am using a centred navigation (logo on the left, contact button on the right and menu items in the middle). Is there a way to prevent the navigation items from stacking as shown in this screen shot? Any help is greatly appreciated! I have researched options however havent been able to get anything to work. I'm using SquareSpace 7.1. Thanks! Link to comment
ShortAngryViking Posted September 16, 2020 Share Posted September 16, 2020 watching, having same issues Link to comment
CMurphy Posted September 18, 2020 Author Share Posted September 18, 2020 I guys, still hoping for assistance with this if anyone has a solution. Thanks for your time! Link to comment
HarKS Posted September 20, 2020 Share Posted September 20, 2020 Same issue!! Not great as my site will be evolving and will require more pages. Any Circle members that could help with this? Link to comment
HarKS Posted September 20, 2020 Share Posted September 20, 2020 Hi Guys! May have solved the issue here... This worked for mine... and I had two nav items underneath the original line. Have a fiddle with the numbers to reflect your page .header-nav *, .header-menu-nav * { display: inline-block !important; padding: -0.5rem; margin: -17.5px; } Let me know how it goes... p.s. Does anyone know how to move nav items closer together? My first nav item seems so far from the rest? 😕 ShortAngryViking 1 Link to comment
inunzi Posted September 20, 2020 Share Posted September 20, 2020 (edited) 30 minutes ago, HarKS said: Hi Guys! May have solved the issue here... This worked for mine... and I had two nav items underneath the original line. Have a fiddle with the numbers to reflect your page .header-nav *, .header-menu-nav * { display: inline-block !important; padding: -0.5rem; margin: -17.5px; } Let me know how it goes... p.s. Does anyone know how to move nav items closer together? My first nav item seems so far from the rest? 😕 @HarKS Yes, there is a way to do this, and it is very easy to do so! Just go to your Squarespace site-click edit-then click the header and click the button that says “Edit header”. After you pressed that button, there should be a few different sections such as header layout, logo and site title,etc. You will want to press the section that says “style”. Now you can customize the link spacing, and more! I sent screen shots down below to help you more. Do you have any other questions? Thanks! Edited September 20, 2020 by inunzi creedon and ShortAngryViking 1 1 Link to comment
ShortAngryViking Posted September 20, 2020 Share Posted September 20, 2020 Thank You @inunzi Link to comment
inunzi Posted September 20, 2020 Share Posted September 20, 2020 (edited) No problem 😁👍 @ShortAngryViking Is there anything else that I can help you with? Thanks! Edited September 20, 2020 by inunzi ShortAngryViking 1 Link to comment
alig123 Posted September 21, 2020 Share Posted September 21, 2020 Does anyone know how to make a header transparent when scrolling? Using 7.0. Thanks!! Link to comment
inunzi Posted September 21, 2020 Share Posted September 21, 2020 @alig123 Can you give more info? Thanks! Link to comment
tuanphan Posted September 21, 2020 Share Posted September 21, 2020 For future comments. If you share site url & which plan do you use (Personal, Business..) We can check 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
inunzi Posted September 23, 2020 Share Posted September 23, 2020 @alig123 I see that you want to have the mobile menu navigation to be transparent when scrolling correct? Well I’m not sure how to do that but I’ll look into it further. But to just have the navigation to be transparent you can paste this code into the custom css section located in the design menu. // Transparent Mobile Menu Header // @media only screen and (max-width: 640px) { .Site { margin-top: -90px; } } .Mobile-bar-branding, .Mobile-bar-menu { z-index: 999; } Link to comment
hellothisisjeff Posted September 30, 2020 Share Posted September 30, 2020 (edited) On 9/15/2020 at 6:38 PM, CMurphy said: Is there a way to prevent the navigation items from stacking as shown in this screen shot? 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. Edited September 30, 2020 by hellothisisjeff jbryan, SodaCreekDigital, oldegray and 1 other 4 Link to comment
CMurphy Posted October 6, 2020 Author Share Posted October 6, 2020 Thanks guys, unfortunately these havent worked for me. @tuanphan is there any possibility you could help assist with this one also? https://mushroom-rabbit-ff8k.squarespace.com PW: merton2020 I'm hoping to prevent the navigation from stacking and instead have the space on either side of the nav, logo and button shrink before then reverting to a hamburger menu. Thanks again! Link to comment
tuanphan Posted October 7, 2020 Share Posted October 7, 2020 On 10/6/2020 at 1:19 PM, CMurphy said: Thanks guys, unfortunately these havent worked for me. @tuanphan is there any possibility you could help assist with this one also? https://mushroom-rabbit-ff8k.squarespace.com PW: merton2020 I'm hoping to prevent the navigation from stacking and instead have the space on either side of the nav, logo and button shrink before then reverting to a hamburger menu. Thanks again! Add to Home > Design > Custom CSS .header-nav { width: 90% !important; flex: 1 1 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
CMurphy Posted October 8, 2020 Author Share Posted October 8, 2020 Thanks @tuanphan this has worked well however the navigation is no longer vertically centred between the logo and button. Any thoughts if this can be resolved? Thanks again! Link to comment
inunzi Posted October 8, 2020 Share Posted October 8, 2020 1 hour ago, CMurphy said: Thanks @tuanphan this has worked well however the navigation is no longer vertically centred between the logo and button. Any thoughts if this can be resolved? Thanks again! Can you send a screenshot? Link to comment
CMurphy Posted October 8, 2020 Author Share Posted October 8, 2020 Sure! @inunzi see below. I should clarify that by 'navigation' I meant the menu items which you will see are sitting off towards the left rather than centred. Cheers. Link to comment
inunzi Posted October 8, 2020 Share Posted October 8, 2020 (edited) Hmmmm that’s weird. Do you want the navigation items closer? Edited October 8, 2020 by inunzi Link to comment
CMurphy Posted October 8, 2020 Author Share Posted October 8, 2020 Aiming to have the navigation items centred between the logo and the get in touch button. Cheers! Link to comment
inunzi Posted October 9, 2020 Share Posted October 9, 2020 9 hours ago, CMurphy said: Aiming to have the navigation items centred between the logo and the get in touch button. Cheers! Can you take a picture of something that can resemble what you are looking for? Link to comment
CMurphy Posted October 9, 2020 Author Share Posted October 9, 2020 15 hours ago, inunzi said: Can you take a picture of something that can resemble what you are looking for? Sure! The first screen shot shows the navigation items centred however this means they stack when the browser size is reduced. This screen shot shows @tuanphan code in-use which prevents the stacking but has pushed the navigation items towards the left. Ideally I would like to keep the items centred while also stoping them from stacking. Thanks for your help! Link to comment
inunzi Posted October 10, 2020 Share Posted October 10, 2020 4 hours ago, CMurphy said: Sure! The first screen shot shows the navigation items centred however this means they stack when the browser size is reduced. This screen shot shows @tuanphan code in-use which prevents the stacking but has pushed the navigation items towards the left. Ideally I would like to keep the items centred while also stoping them from stacking. Thanks for your help! I will try to test something out tomorrow for you 😁! Link to comment
inunzi Posted October 10, 2020 Share Posted October 10, 2020 18 hours ago, inunzi said: I will try to test something out tomorrow for you 😁! If you scroll up on the this forum page. I sent screenshots of something that can help you change how close or how far you want the navigation items. Please let me know if this was/wasn't what you where looking for. Thanks! Link to comment
CMurphy Posted October 11, 2020 Author Share Posted October 11, 2020 On 10/7/2020 at 6:51 PM, tuanphan said: .header-nav { width: 90% !important; flex: 1 1 90% !important; } Unfortunately not! 🤨 I'm using the code above which resolves the issue of the menu stacking however it pushes the menu items across to the left (closer to the logo) rather than there previous centred position... 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