Search the Community

Hey, I'm building my site in 7.1 (mainly to get to grips with using it) and I've come across one problem I can't seem to fix. The dropdown navigation has white text & a white background(image attached) My header colour palette is yellow, whereas the main website has a white background, I'm wondering if this is part of the problem. It'd be greatly appreciated if anyone can find any workaround for me. Site is here: https://hexaflexagon-star-bh8p.squarespace.comPasword: 123123

Site URL: https://www.yasmineandomar.com/ Can some one tell me, im trying to move the ( RSVP ) button to the upper right, any help please.

This may be a long shot, but is there ANY way to add images to an accordion menu? I have a partners page where the logos would look much better if they were hidden in an accordion menu, but from what I see, there's no option for that...

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.

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!

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://rust-mustard-yyx2.squarespace.com/ Hi there! I'm trying to make it so there is a little squiggle underneath the menu items on hover. Here is a site that does it except with sharper lines (and they don't appear on hover they only appear on click): https://chinacfrost.com/about-1 I want the squiggle to appear on hover and then stay when clicked but I have no idea how to go about this? Here is my site: https://rust-mustard-yyx2.squarespace.com/ password: beans

Site URL: https://www.christinadiehl.com My client is a self-published author and real estate investor who wanted an author website. I am looking for feedback from a user-experience standpoint on the navigation. Any feedback is appreciated. TIA!

Site URL: https://derricksaenz.com Hello! I am working on getting my website to look nice and clean, and one of the things on my mind is getting the header to be concise. So, I wanted to use a hamburger menu to collapse all my navigation and put it on the side of my website. However, the problem is that when I open it, there is some padding issue with the flex box or something, and it pushes all my links to the side. I would want everything left or center justified to the square I have set. Pasting my code below for reference. All found free while scouring the internet. /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none !important; } /* Hide header button */ .header-actions { display: none !important; } /* show burger */ .header-burger { display: flex !important; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important; } } @media screen and (min-width:992px) { .container.header-menu-nav-item, .header-menu-nav-item a, .header-menu-actions.language-picker-content, .header-menu-actions.language-picker { font-size: 28px !important; margin-top: 0px !important; margin-bottom: 5px !important; min-width: unset !important; } .header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important; margin-left: 66% !important; margin-right: 10% !important; margin-top: 1.75% !important; height: 33% !important; box-shadow: 0px 30px 100px rgba(12,112,232,.5) !important; transition: opacity .5s cubic-bezier(0.32, 0.08, 0.24, 1); -webkit-transition: opacity .5s cubic-bezier(0.32, 0.08, 0.24, 1); } .header-display-mobile .header-title-text { width: 20vw !important; font-size: 1.5rem !important; } .header-menu-nav-folder-content { justify-content: flex-start !important; /* vertical alignment of navigation */ text-align: center !important; /* navigation text alignment */ } .header-menu-nav-folder:not(.header-menu-nav-folder--active) { display: none !important; /* hides non-active folder */ } .header-menu-cta { width: 33vw !important; /* width of button */ } .header-menu-cta a { min-width: unset !important; } } The away that my code is set up, it doesn't allow for folders or the language switch option, which sucks since I'd appreciate those features. They just get pushed off the blue background. If that issue can be addressed too, that would be AWESOME, but I'm mainly holding out for the spacing since that more pertinent. I am somewhat trying to emulate clay.global's header, given that I have a clean aesthetic and a similarly simple logo going. I think that looks awesome and super intuitive despite it being hidden in a hamburger. I would appreciate any help or insight. Feel free to criticize the code too if you want 😅. Thank you!

Site URL: https://www.goprettyinpaint.com Hello, After who knows how long of it not working, it was brought to my attention today that my "hamburger" menu on my site does not expand on mobile. This explains why it seemed a lot of people were missing information about our biz. Can someone please help? Tila

Site URL: https://www.players-social.com/food Hi there, I'm looking to change the font style for the price on my online food menu. Can you please help me how to target it in CSS as I was able to change all the title and description fonts, but the price stays in the old font and it's not aligned with the rest. Many thanks

When in mobile version and clicked menu hamburger I can't see any of my menu options URGENT pls

Hi! I have installed a custom font that is showing up wonderfully everywhere on my site. However, I would like it to also show up in my food menu, specifically just the food item titles. What would the css coding be for this? Below I indicated which words I am referring to with the pink rectangles

Site URL: https://gar-grouper-xgll.squarespace.com/home Hi everyone, is there a way to adjust the menu according to the design in the screenshots? I would like to add a description and a link to the sub categories. Also, I noticed the headers in the menu move as soon as the font turns to "bold" when selected (because the box gets bigger). Is there a way to prevent this? Hope you can help!

Site URL: https://www.bubbleteaboss.com Hi, Can someone help me. I've tried existing codes in the forums but they do not work. How do you add vertical lines (dividers) between the items of your navigation bar/header? So far, I only manage to add a | by adding one to the navigation title (in the Pages section) but this is not working right because the | also changes color once you put your cursor on it (e.g. "Home |" becomes a secondary color instead of just "Home"). Does anyone have a CSS code? Thank you 🙂

Site URL: http://rituelstudio.co I posted this before, but my question was not answered. I am trying to make a single word bold throughout the entire website. Not in the title!! It is in the header as one of the menu items and must be bold. Can someone show me how to do this using css? Thanks for any help!! Kate

I have used a code to create two columns for my header menu file dropdown. But I only want the first folder to have two columns - services+conditions. The rest I would like to keep one column. Does anyone have a code for this? I am using Impact theme. Thanks! This is the code I used: .Header-inner--top .Header-nav-folder { column-gap : 1rem; display : grid; grid-template-columns : 1fr 1fr; }

Site URL: https://symposium2023.com Currently having an issue with our site where on mobile if you click a link to another page, then click the back button on your browser, the mobile menu burger is unresponsive. You either have to click the home button/logo or refresh and it works again. In addition, if you navigate to another page after opening the menu overlay, if you click back, the overlay will open instead of the page. The X in the top right is also unresponsive so you can't exit the overlay without refreshing. This has been replicated on multiple devices and browsers. There's no custom code on the site so I'm not sure what could be causing the issue. Any help would be greatly appreciated! Here are the steps on mobile for issue with menu + overlay. Visit the homepage Click the menu -> Info -> Four Seasons Click backwards on your browser Try to exit the menu overlay Mobile menu issue, just burger icon Visit the homepage Click the “Let me explain” link Click backwards on your browser Try clicking the hamburger menu.

Site URL: http://www.elizabethcurrer.com The menu has disappeared from my mobile website homepage. Everything was fine yesterday, and I don't think I have changed anything. Thanks for any help you can give, I'm a novice when it comes to this stuff.

Site URL: https://www.maroazul.com/menu Hi, I handle a menu for a restaurant in Europe, where the currency symbol always goes after the amount (in the US it goes before). Menu Blocks in Squarespace only place the € currency symbol before the price, can someone help me figure out how to move it to after the price? Thanks!

Site URL: https://www.yasmineandomar.com/dress-code

Site URL: https://karenchan.co I created a bilingual (Chinese <> English) personal website (https://karenchan.co) On the header menu, each option has 2 languages (eg. there are homepage(Chinese) and homepage(Eng) My goal: When I visit Chinese pages, all English pages on the header menu will be hidden. I used the below code for Chinese pages (to hide English menu) but nothing happened on my site. #collection-6324c402e9e2b1601cc2a36e.header-nav-item:nth-child(even), #collection-6324c0fd96a62268fb782d0e.header-nav-item:nth-child(even), #collection-6324c1046efd5f53d3f174ca.header-nav-item:nth-child(even), #collection-6324c17b751d3b0423ebf3a3.header-nav-item:nth-child(even), #collection-6324c1ee6efd5f53d3f19d29.header-nav-item:nth-child(even) { display: none; } May I know what I did wrong?? Thankyou so much!

Site URL: https://strawberry-wedge-j8ss.squarespace.com/menu Hi, I'm trying to figure out how to add icons inside a menu block, particularly related to food allergy (see the example of the printed version attached). I would like to add those same icons under each dish as necessary, can someone help me figure this out?

Site URL: https://www.simonu.nl/dansen Hi all, I am looking to remove the mobile menu from a single page (www.simonu.nl/dansen) of my website. I just want the page to be a blank page with just one photograph shown. I did add the following code to the page's advanced inject custom code menu: <style>#header, #mobile.bar, #footer {display: none !important; }</style> This removed all emelents from the page on desktop. But on mobile the drop-down menu stays. How do I remove the mobile menu as well? Any help would be much appreciated! Thanks in advance, Simon

Site URL: https://derrickfagan.squarespace.com/ Hi I have been working on this website for sometime now and I am done with basically everything but I have been having this issue with resizing especially for tablets. The second one is a screenshot of how it looks on my ipad, and the first is a screenshot of the mobile look. The Ipad (tablet) version does not stack the columns; it still loads the desktop version with only the hamburger menu. Please how can I get the tablet version to load the mobile version exactly? I can provide log in details if necessary. Thank you. Kind regards.