Search the Community

I cant find any stylizing settings in the design styles section. Do I have to do this with custom code? Im using the Motto template. Feel free to check out the website here www.thecharlesbar.ca. You will see that the menu items arent stylized properly :( Thanks!

Id like to change the mobile menu navigation "MENU" in Wells to a logo (PNG). is that possible

Hi. I've noticed that the hamburger icon on 7.1, which on my site comes up with a narrow window or on mobile, is strangely only 2 lines rather than the standard 3. I've had feedback from a friend saying that it might not be immediately clear on mobile that the 2 thin lines lead to a menu, whereas a bolder one with the usual 3 would be more obvious. The helpdesk told me there's no way around this apart from with custom code so can somebody please help me with how to achieve this?

It's possible I'm overlooking something totally obvious, but I'm trying to figure out the CSS to create an in-page dropdown menu that someone would click on and have the option to click on links to multiple other pages or files. I don't just want a standard button that links to one thing. I'm looking to create something like pictured in this image: Please help! Thanks!

Hello all, I would like to change the default menu icon + interaction to the one I found on this code-pen page: https://codepen.io/yousafkhan/pen/XWWJQyp I'm using the Sofia template. Does anyone know how I'd be able to do this?

is it possible to add a background image to the menu mobile display?

i'm trying to build my own website but i would like to edit my mobile version of it. so i wish to have the menu and the logo on top of my image banner on the top. i provide examples

Hello I have tweaked the CSS code ever so slightly on this top bar menu.I would like to change the text to grey and have less space between the lines when the menu opens.Can someone please help? Thanks so much!Ana This is the current code:@media only screen and (max-width: 800px) { #mobileMenuLink li.active-link a { visibility:hidden; } #mobileMenuLink li.active-link a:after { visibility: visible; font-family: 'squarespace-ui-font'; font-size: 2em; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\e030"; text-align: right; display: inline-block; vertical-align: right; margin-right: -10px; margin-top: -0px; color: #808080; } #header { height: 80px; width: 100%; margin-left: -20px; position: fixed; background-color: #ffffff; margin-top: -20px; } #logo { margin-top: 14px; margin-left: 20px; } #mobileNav nav.mobile-nav ul { margin-top: -15px; } #mobileNav.menu-open { position: fixed; width: 100%; z-index: 10; height: 290px !important; margin-top: 50px; background-color: #ffffff; -webkit-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); -moz-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); -o-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */ } } This is the website, please visualise in mobile mode. https://tambourine-algae-4xn6.squarespace.com/config/design Thanks so much!Ana

I want to group Menu items under one folder but I don't want the top level item to go anywhere. e.g. Shop Menswear Womenswear Kidswear In that example, Menswear, Womenswear and Kidswear would fly out when the cursor hovers on Shop but if you click on Shop nothing happens. How do I do this??

I designed a one-page website, the page will scroll down when you click the selected item in the top of the menu bar in desktop mode.The Problem is that in mobile mode( will change to hamburger menu), even when I clicked the selected item, the menu panel doesn't go away due to the one-page design which won't reload the page.

I designed a one-page website, the page will scroll down when you click the selected item in the top of the menu bar in desktop mode. The Problem is that in mobile mode( will change to hamburger menu), even when I clicked the selected item, the menu panel doesn't go away due to the one-page design which won't reload the page.

Hey all, Just thought I'd share my little hack to create navigation on a group of subpages belonging to the same folder in the main navigation. Disclaimer: This was done in somewhat of a hurry, and I haven't used jQuery in a long time, so there's likely a more efficient way to code it. If you know or come up with a better way, please do share it! The way to use this, is simply by creating a folder in the main navigation with pages in it. Then on each page, using the code block, insert a DIV with the ID "pageMenu". Then add the code below using code injection to all pages (Settings > Advanced > Code Injection) in either the Header or Footer, making sure to replace "yourdomain" with – you guessed it, your domain 😉 The code first checks if a DIV with ID "pageMenu" exists on the page currently being viewed. If it doesn't, the code won't run. If it does exist, the code then looks through all Main Navigation folders for a match between the current page url and links inside those folders. If one is found, that parent folder's code and all the links inside it (basically a UL list) will be appended to the DIV with ID "pageMenu". All you need to do then is style it using some custom CSS. Also, I wanted to make it possible for the guy responsible for the content on this site to hide any folders with subpage menus on its pages. So to do that, using this code, all he needs to do is name the folders "Foo" (feel free to change this). If you do this, chances are you might want to also hide the folder name from the new page menu, which the code below also does. FYI 1: Of course no code is actually moved, as you can see by viewing source on the resulting page, the page only acts as if it was. FYI 2: You may need to tweak the selectors a bit depending on which template you are using, since not all main navigation menus are constructed the same way. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Move Main Nav folder where current page is a child to wherever an object with ID "pageMenu" is placed manually on page if ($("#pageMenu").length){ //Get current page url without domain var canonical = $('link[rel="canonical"]').attr('href'); var pageurl = canonical.replace('https://www.yourdomain.com', ''); //Find menu in Main Nav that contains a link matching the url of current page and get its HTML content into a variable var mainmenuFolder = $(".main-nav .folder-parent a").filter( function(index) { return $(this).attr("href") === pageurl; return false;} ).closest("div.folder-parent").get(0).outerHTML; //Append the Main Nav folder found to the #pageMenu object $("#pageMenu").append(mainmenuFolder); //Hide the Parent Folder link in the newly created Page Menu $("#pageMenu .folder-parent a:first").hide(); } //Hide all Parent Folders in Main Nav if they're named "Foo" $(".main-nav span").filter(function(index) { return $(this).text() === "Foo";}).parent().hide(); }); </script>

Hi, How can I adjust padding of the navigation on the menu? screen attached: https://imgur.com/FX8LdFl website:https://marigold-onion-dm3a.squarespace.comPassword: Campcamp1 @tuanphan Regards

Hi, How can I do this? (screen attached) https://imgur.com/AT5fMXr website: https://marigold-onion-dm3a.squarespace.comPassword: Campcamp1 @tuanphan Regards

Hi, How could I apply these changes (screen attached): https://imgur.com/1HUDe40 website: https://marigold-onion-dm3a.squarespace.com

Hi y'all. I'm trying to create a mini-menu on one of my pages. Basically I have four text links next to each other on a textblock. I'd like to know how to keep them evenly spaced and prevent vertical stacking when viewed on tablet and mobile? Attached is a screenshot of the desktop view. It seems fairly simple, but I can't figure it out.

Hi, Is it possible to add logo and text to the menu on mobile? I am using Brine template. Regards

Hi, folks - I'm building a site using a Brine child theme. I wanted to make my folder links in my topline nav link to pages (which should be easy to do!) and found that several folks had crafted solutions to this, so that's great! I went with the simple HTML workaround described here, and it's working great. However: I then noticed that on mobile, the folders I've added links to don't expand — they just go to the page I've linked to. (For example: say I have a folder called "Projects." I renamed that folder < a href="/projects" > Projects < /a > ...so that it now links to my "all projects" landing page. On desktop, a user could either mouse over "Projects" to see a list of projects, or click on "Projects" to go to that landing page. However, on mobile, the user can only tap "Projects," which takes you straight to the landing page, and doesn't allow you to see the list of projects that appear in the dropdown on desktop.) My question, then: is there a workaround to make a folder link on desktop but NOT on mobile? I know there are some Javascript-based solutions to the "add a link to your folder" issue (e.g. https://answers.squarespace.com/questions/23951/can-i-link-a-folder-to-a-specific-page.html). Since, well, I'm a complete Javascript noob: is there anything like a @media query for JS? i.e. could I modify that script to say, "if we're collapsed for mobile view, no link!" — or might there be any other ways to address this? Thanks, all!

I'm hoping to change my current template for my website. Looking at this page https://www.squarespace.com/templates I see the templates Crosby, Maru, and Hester available as options, which I like. However, when I go to the template menu inside my Squarespace site, and attempt to switch to one of these templates, I'm not seeing any of these templates come up as options. Are these templates discontinued? Have their names been changed? Any help appreciated.

I have an option in my menu that I want to be styled differently to the other options. Is it possible to do this or can you only style all of the options as one?

How can I change the font in the dropdown menu in the ordering process when selecting variants?

Hi Im hoping to use the burger menu on desktop instead of a type menu on the York Template. I have tried a few solutions for other templates but they havent worked. Any ideas? thanks Bobby

My header and menu don't show up on non-homepage pages on my blog. What's causing this issue and how do I fix it? Thanks in advance for the help!

Hi, Im wondering if anyone can help me move my logo all the way to the right and my navigation menu all the way to the left? Im using a custom template. Thanks :)

I have a few unlinked pages that I want to use as "landing pages" Meaning that when someone lands there, I don't want there to be any links back to the rest of my site. I have been able to remove the navigation menu from the desktop version of the page using the code shown in the attached file screenshot68. But as shown in screenshot66, it still shows up in the mobile view. I have tried several ways to disable the menu showing in the mobile view, but none have worked so far. I've also noticed that the footer navigation needs to be removed also. So any advice on that would also be greatly appreciated! I am using the "Maple" template and the landing page in question is located at https://tmphotographync.com/real-estate Thanks for your help in advance!