Search the Community

Site URL: https://www.charlottenorthlacrosse.com I'm trying to change the color of the navigation bar that appears at the bottom of this site's header from one color in the existing palette (maroon) to another color (gray). (Please see screen shot.) I've searched online and read/watched what I found. Then I've gone into Edit Site Header several times but have not been successful in changing the color. The header style is set to "Theme." (Other header styles are suitable in this case.) I've deselected maroon - and substituted gray - in all the the obvious places in the various color themes shown. (Maroon is still in the site palette, but doesn't show up as a separate theme anymore.). The maroon navigation bar is clearly part of the site header, but if it matters, the next section has an image (a photo that doesn't include maroon) and a black and white video that runs in the background. When you go to Edit Section - Colors, gray (not maroon) is selected for the main elements of this section, although there is nothing in the section other than the photo and video. (See screen shot.). So I wouldn't think this section is causing the navigation bar to appear maroon. What am I missing? Any guidance is appreciated. Thank you.

Site URL: https://dharmicliving.squarespace.com/ Hello! I am having issues with trying to create an offset floating navigation bar. I am using the below code which works perfectly on all pages except for the homepage, which is an index page. I want the offset margin to be present on all sides but currently the homepage is not viewing properly on the right hand side - see screenshot. Please help and thank you! pw : Dharma // Floating Header Bar // header { margin: 25px; } I am also using this code to create the background colour for the navigation... .Header { background-color: #f0efed !important; }

Site URL: https://snail-saxophone-k3pk.squarespace.com Hello, For some reason a white square appears around 'Programs' on click in the navigation menu. Would someone please tell me how to get rid of this? Thanks, Dan

Hey! I'm using the new Squarespace 7.1 and am having some troubles finding any info on making the nav break at a certain point to enable the mobile hamburger icon for desktop. I don't want their typical nav for desktop, just wanting to have the hamburger icon across all devices. Thanks for any help! https://chameleon-porcupine-c7jc.squarespace.com/ password: 1234

Site URL: https://shallot-leopard-twxs.squarespace.com/ https://shallot-leopard-twxs.squarespace.com/ pw: carden Hi there - I am looking for help moving my menu navigation to the top right side of the screen and keep the logo in the center. Site header options aren't letting me pair these two options together.

Site URL: https://processnpower.squarespace.com I've looked and cannot find how to move the navigation below the logo on the bedford 7.0 template, can someone please help! Ty, Brian

Site URL: https://lychee-carnation-4cdg.squarespace.com/ Hi! I'm trying to create a multilingual website and everything is working except for the items on folder that are not showing up on mobile. I followed this tutorial: https://www.creationsbyfaria.com/blog/multilingual-site-squarespace Basically I've created every page I need for each language, and I'm using custom CSS on each page to hide the navigation items I don't want to show on a specific language. Everything is working perfectly fine on desktop, but on mobile, on the second and third language, the items on the folder I have are not showing up. I've attached a print of what my Pages look like. The first language is Portuguese, the second English, and the third French. The Products folder is the one I'm having trouble with on Mobile. Basically when I click the folder the options are not visible, but this only on the second and third language. On Portuguese they show up fine. This is the code I'm using on the English Pages to hide the Portuguese and the French ones: <style> #header .header-nav-item:nth-child(1) {display:none} #header .header-nav-item:nth-child(2) {display:none} #header .header-nav-item:nth-child(3) {display:none} #header .header-nav-item:nth-child(4) {display:none} #header .header-nav-item:nth-child(5) {display:none} #header .header-nav-item:nth-child(6) {display:none} #header .header-nav-item:nth-child(7) {display:none} #header .header-nav-item:nth-child(15) {display:none} #header .header-nav-item:nth-child(16) {display:none} #header .header-nav-item:nth-child(17) {display:none} #header .header-nav-item:nth-child(18) {display:none} #header .header-nav-item:nth-child(19) {display:none} #header .header-nav-item:nth-child(20) {display:none} #header .header-nav-item:nth-child(21) {display:none} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(1) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(2) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(3) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(4) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(5) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(6) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(7) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(15) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(16) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(17) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(18) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(19) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(20) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(21) {display:none}} What can I do to solve the problem of the folder items not showing on mobile? Thanks a lot! Error Folder Menu.mp4

Site URL: https://herring-oval-6885.squarespace.com/ Hello, Is there a way to stack the menu aligning it to the left? rather than having it all as one line? This is how it is at the moment: And this is how I want it: Is this possible? Thank you Lucia

Site URL: http://www.furkhaniqbal.com Hi, I wanted to add the following text "Digital Designer" beside the site title. However, I did not want it to appear on mobile (desktop only) and wanted it optimised so it maintains inline with the rest of the content? How could I do this?

Site URL: https://www.nuancedgifting.com.au/ Hi there! I'm faced with a similar problem whereby my "Ready to send", "Contact Us" and "FAQs" page seems to disappear as I click on my services page. but when I clock on home, everything returns to normal. The pages are still there as I can see that I can click on it, but it looks like It's invisible. I'm stumped and i've been trying to sift through the css to find whats going on but no luck 😞 I'd be so appreciative if anyone could shed some light. Thanks so much!

I have the categories set to top bar navigation. I would like the category navigation (all the categories) to remain in view on each category page (not product pages), with a highlight on the current category the viewer has clicked. Currently on my site when you click a specific category, the entire listing of categories disappears leaving only "all pieces /"* and the category you are on. *Further, I don't understand where the slash mark is coming from either as it is not part of my naming and I would like to remove the slash.

Site URL: https://uxplaybook.org/ Unsure why the navigation is hiding my PPP banner. I toggled the navigation fixed (basic & scroll back) and unfixed -- doesn't work. As Parity Deals just offers a JS code, what can I do to make sure its on top of the navigation (or it not be hidden)?

Site URL: https://www.abeno.co.uk/order Hi guys, Quick question, we've got a couple online stores up with breadcrumb navigation which work great on the computer, but disappear in the mobile version and seem to allow only the arrow options. Is there a way to keep the breadcrumb nav in the mobile site? The thing I'm worried most about is frustrating customers, because after you add an item to basket you have to press back on the browser to go to the previous page, or through the main site navigation, both options of which bring the customer back to the top of the main store page regardless of what category they might have been in. I'd be very grateful if someone could give me a hand with this. Cheers, Matthew

Site URL: https://www.DelawareRising.club/roster Hello! I have a second bar under my navigation on some pages, but I can't figure out the code to make it responsive like the header nav across varying sizes... Any help would be greatly appreciated 🙂 This is the code I currently use, which I know changing the margin just picks the location of the bar just on that page dimension. div.roster-banner { margin: -110px 0px 0px -500px !important; width: 2000px !important; text-align: left !important; background: linear-gradient(0deg, rgba(22,47,71,1) 95%, rgba(255,255,255, 1) 20%);

Site URL: https://avarrow.com/ Hello! I am trying to figure out how to display my navigation bar on all of my pages, and not just the homepage. I have already uploaded a CSS code to add a background to the bottom header, which is where I have the nav buttons displayed so that it looks like they have a background bar. I added some code to reduce the margin top on my other pages and the nav buttons display, but no background... I also noticed that the text is black, and with the background, I would prefer for them to be white. Please advise!!! I have included pictures of one of the child pages showing the nav buttons with no background and a picture of my homepage with the desired nav buttons featuring a colored background. Thank you in advance! (Site password is 8520)

I'm trying to put a border above and below the navigation, but every time i do it moves the shopping cart and social links to the middle too. Is there a way to put a line above and below the navigation links without moving the shopping cart and social links too? This is the code I'm using: @media only screen and (min-width:640px) {.header-announcement-bar-wrapper { padding-left: 0px !important; padding-right: 0px !important; }} @media only screen and (min-width:640px) {.header-display-desktop { flex-direction: column; }} @media only screen and (min-width:640px) {.header-title-nav-wrapper { flex: 0 0 100% !important; margin-right: auto; width: 100% !important; }} @media only screen and (min-width:640px) {nav.header-nav-list { display: flex; width: 100%; border-top: 2px solid #59636C; border-bottom: 2px solid #59636C; padding-top: 10px; padding-bottom: 10px; margin-bottom: -22px; }} Thanks!

Hi! I've got a problem with split navigation on my site. I've added CSS to split it into the half with logo in the middle. I also adjusted the screen width so it doesn't overlap when the window is minimized. It looks and works just as I wanted on Chrome but it is doing weird things in Firefox and Safari. How do I make sure it will look good in every browser? Screenshots with descriptions are attached below. Code: @media screen and (min-width: 1100px){ .header-nav { position: absolute; top: 53px; bottom: 0; margin-top: 0!important; margin-left: 50px!important; } .header-nav-item:nth-of-type(3) { margin-right: 400px!important; } .header-title-logo a { z-index: 1000; position: relative; } }

Site URL: https://malenyvedicvillage.squarespace.com/ Hi community! I am wanting a gradient secondary navigation button to be featured only on pages with no background images. The below code works great for all pages, as in it changes the home page button as well. I don't want this to happen, I would like it to remain white, while the rest are gradient. pw : Maharishi Thanks for any help 🙂 .Header-nav--secondary .Header-nav-item { background: linear-gradient(to right, #e4bc60, #b7812d) !important; }

Greetings, Does anyone know of a way to style the 7.1 mobile menu so that any dropdown menus (links in folders) are displayed as part of the navigation list on the main mobile menu page? Right now clicking on the hamburger in the site header brings you to a page with a list of nav links and any folders have an arrow to the right requiring you to click onwards to another page in order to see the dropdown links. I'd like them to display as part of the main list, ideally as indented subcategories. I've attached 2 screenshots of how it works now... the third image is the way I'd like it to look (photoshopped). Seems like this would already be a Squarespace feature, maybe I'm missing something? Surely a more efficient way to navigate the mobile menu than clicking through to extra screens. Thanks!

Hello! I'm looking to change the color of navigation links when I hover over them in Squarespace 7.1. There doesn't seem to be an option to do that yet. Does anyone know the CSS for this? Thanks!

Site URL: https://www.squarespace.com/templates/zion-demo I've seen this question come up a couple of times, but no solutions as yet. Is there a way to make the galleries in a portfolio loop so there's always a previous and next arrow, even on the first or last gallery of the portfolio? The Zion template is an example where scrolling to the bottom of the first gallery ("Fashion") allows navigation to the next section ("Lifestyle") but there's no "Previous" arrow (which in this case would link to the "Food" section.) https://www.squarespace.com/templates/zion-demo Is there a way to loop pagination from "Fashion" to "Food"? Any help really appreciated!

Site URL: http://laurabustaffa.com I've customised the appearance of items in my mobile menu. The aim was to have all items appear at the top of the screen rather than in the middle and the button after them rather than at the bottom of the screen. Like this: But on iPhone safari the button disappears: I've botched this code digging through past responses: /*move nav items to the top on mobile*/ [data-folder] .header-menu-nav-folder-content { justify-content: flex-start; } /*move button up on mobile nav*/ header#header .header-menu-cta { position: relative; top: -600px; } Maybe -600px is too much? I guess a measure relative to the menu items rather than absolute might be better? but I'm not a developer... 🙂 Thanks!

Site URL: https://www.mirboonorth.com/ Is it possible to replace text in the navigation with an icon? I would like to replace the word 'Search' (which is a custom page, not the standard 'Search' page offered by Squarespace, with a magnifying glass icon. I have tried the Alt code for a magnifying glass but it isn't recognised.

Site URL: https://www.elevationweb.org/best-nonprofit-websites/ I am currently on the most recent version of squarespace 7.1 and I am trying to figure out how to do what this website does with the notification bell in the top right corner of the navigation: https://www.elevationweb.org/best-nonprofit-websites/ It does not necessarily have to be a bell, but I want to know how to create the "external navigation" where it zooms out of the homepage like that using a nav button. Also, how can I get the banner icon on the top right in my navigation menu like on this website: https://www.sbs.org/ Thank you in advance! @tuanphan

Site URL: https://www.shopartbar.com Hello, I am trying to change the mobile nav to show drop-downs with subcategories vs. going to another page to show the subcategories. How can I change/add to the code to allow for this type of movement? Any help is appreciated! (Password: haley) Mock-up attached: now (left) how I would like it to look (right). Thank you!