Search the Community

Site URL: https://red-flatworm-zkhn.squarespace.com Hello, I am currently trying to make a very simple header that displays our store logo to the far left and some writing on the far right. I want everything to align and to adjust to suit screen size it is viewed on. I have also tried to create a small black banner for a pages menu, I would also love some assistance on this too. I have tried to build both using custom CSS and markdown but would like some assistance on creating a header and menu banner that would display better (change to suit screen size) as my current attempt displays weird on other laptop screens. Attached is a photo on how I'd like it to appear.

Site URL: https://octahedron-grasshopper-7fpn.squarespace.com/ I want to declutter the menu bar in the header of my site. I'd like to move the social links to either above or above. I'm leaning towards above. Preferably above the 'Book Now' button.

Site URL: https://www.rlsignings.com HELP! I have a client asking for a hamburger menu on the left of her desktop page with her currently active button left on the right of the screen. She wants the mobile menu to be "normal" as it currently is. I've searched so many streams and I have no idea what kind of css to use to make this happen. I can revert the current home page menu to a mobile hamburger style, but that inserts the button into the menu where my client would like it to stay in the header. How can I accomplish this?! Thank you!!!

Site URL: https://copper-bullfrog-28wb.squarespace.com Does anybody know how to get rid of this line under the burger menu icon? It only shows in Desktop and only in certain pages, idk why? And as well, can I change the weight on the lines? It only changes on mobile version with the custom CSS i've used... Thank you so much in advance!!

Hello! Would it be possible to add custom links as icons like on the image?

Hello! Does anybody know how to swap Folder name (MENU) for Burger menu icon? And how can I style that burger icon? Thank you so much!

Site URL: https://www.thecarolamoon.com I've added a page to my secondary menu "Contact" and it's not showing up anywhere on the site. I'd like it to show up next to my main menu and to turn it into a button. Can you help?

Site URL: https://www.lapetitefermedalpagas.com/ I'm using the translation service Weglot. When on some mobile devices, the option to translate cannot be seen on the menu without scrolling down which I fear would send my french customers away. Is there a way to have this element moved to the top of the menu?

Site URL: http://www.goedland.nl Hi all! I'm looking for a way to hide the mobile hambuger menu on a few specific pages of my website.. How do I best do this? In my Custom CSS I've added the following code on the pages I needed to hide the main navigation & footer. In this I have succeeded, but the hamburger on mobile remains... Also is there an easier way to hide the main nav and footer than what I've used now? Thanks in advance! #collection-5ea43d4d14bd4f0e74ba7e12 .Header-nav { display: none!important; } #collection-5ea43d4d14bd4f0e74ba7e12 .Footer { display: none!important; } #collection-5ea442813c53f87600534627 .Header-nav { display: none!important; } #collection-5ea442813c53f87600534627 .Footer { display: none!important; } #collection-5ea442b5f222897b8d590132 .Header-nav { display: none!important; } #collection-5ea442b5f222897b8d590132 .Footer { display: none!important; } #collection-5ea442c7a9fa910a7d7f11b2 .Header-nav { display: none!important; } #collection-5ea442c7a9fa910a7d7f11b2 .Footer { display: none!important; } #collection-5ea442c28315084d6dba2579 .Header-nav { display: none!important; } #collection-5ea442c28315084d6dba2579 .Footer { display: none!important; } #collection-5ea442cebe3c470ba754c787 .Header-nav { display: none!important; } #collection-5ea442cebe3c470ba754c787 .Footer { display: none!important; } #collection-5ea442bbb1653635c3af81f4 .Header-nav { display: none!important; } #collection-5ea442bbb1653635c3af81f4 .Footer { display: none!important; } #collection-5ea442af1d0fc8570b270cfe .Header-nav { display: none!important; } #collection-5ea442af1d0fc8570b270cfe .Footer { display: none!important; } #collection-5ea44341397d8072ce4662c6 .Header-nav { display: none!important; } #collection-5ea44341397d8072ce4662c6 .Footer { display: none!important; } #collection-5ea443362fec9937a4430f10 .Header-nav { display: none!important; } #collection-5ea443362fec9937a4430f10 .Footer { display: none!important; } #collection-5ea4433b00047c5743af480b .Header-nav { display: none!important; } #collection-5ea4433b00047c5743af480b .Footer { display: none!important; } #collection-5ea44325ee86164fffff2b3e .Header-nav { display: none!important; } #collection-5ea44325ee86164fffff2b3e .Footer { display: none!important; } #collection-5ea4432b397d8072ce466142 .Header-nav { display: none!important; } #collection-5ea4432b397d8072ce466142 .Footer { display: none!important; } #collection-5ea4433089503f2e48088ef6 .Header-nav { display: none!important; } #collection-5ea4433089503f2e48088ef6 .Footer { display: none!important; } #collection-5ea443878315084d6dba3c03 .Header-nav { display: none!important; } #collection-5ea443878315084d6dba3c03 .Footer { display: none!important; } #collection-5ea4437de702471b5a2a30f4 .Header-nav { display: none!important; } #collection-5ea4437de702471b5a2a30f4 .Footer { display: none!important; } #collection-5ea442a78315084d6dba22b4 .Header-nav { display: none!important; } #collection-5ea442a78315084d6dba22b4 .Footer { display: none!important; }

Hello 🙂 I'd like to know if I can make my dropdown menu as high as the site? On the chat with squarespace they've told me the height goes as far as the links in the menu itself but there's a way with custom code. Any ideas? Thank you so much in advance!

Site URL: https://www.baysidela.org I don't remember any option asking me if I wanted to add a "Login" to the menu navigation. All of a sudden it showed up. Does anyone know why this showed up, and how I can remove it from the menu? Do I need to include some kind of HTML code to turn it off?

Site URL: https://bluebird-decagon-tlaa.squarespace.com/ Hi there, I'm looking for some help on alignment of my menu header title dropdown lists, somewhat related to previous threads in this forum. However, what I'm trying to do differently is make it so that only some of my menu options are left-aligned for the dropdown list, while others are right aligned. So for example, I want the "Our Work" and the "Connect" tabs to remain left aligned, but would like the "Stories" and "About Us" tabs to be right aligned. Here is the custom code I've used to get to this point-- any insight would be helpful! a.header-nav-folder-title:hover + div, .header-nav-folder-content { text-align: left !important; position: absolute; left: 0% !important; right: unset !important; background: solid !important; } .header-nav .header-nav-item--folder .header-nav-folder-content { padding: .25em!important; .header-nav-folder-item a { padding: 1em 1em!important; border-bottom: 1px solid #a02f7b; }}

Hello! I'm just getting started with building out a 7.1 site for a client and was wondering if there was a way to recreate the hamburger menu similar to this site? The hamburger menu with the word "menu" next to it? https://jana.showit.site/ Thanks!

Site URL: http://capybera-point-sp57.squarespace.com Site password: 1234 Hey there! I'm trying to figure out if there is a way to add a blur effect to my site when I open the menu up on a mobile device. For example, in the picture I'd like the background "hey there", "work i'm proud of", and even the dividing line between the blue and the white to all be blurred when this menu is open.

Site URL: http://brockzahler.com Hi! Longtime user first time poster. Anyone know why the menu bar at the top here won't center the elements and navigation? It drives me nuts and I cannot seem to figure out what's causing it. I have tried changing the logo and messing with the padding, but it doesn't really help.

Site URL: https://maroon-iris-8gg6.squarespace.com/ I created a burger menu in CSS, but I want to change the background color of the menu that pops up to a beige/sand color. How do I do that? Also I would like to add a link to my LinkedIn and Instagram account at the buttom of the menu - is that possible? The first screenshot shows how the menu looks now. The second shows which colour I want the background to be and where I want to place the social media links

Site URL: https://bridal.chenesebean.com I'd like to remove the menu overlay color in my website. I don't need it and I didn't see an option to turn the color option off. FYI, it only appears when scrolling. Thank you.

Site URL: https://prthisandthat.com My menu keeps overlapping so I had to reduce the size of the desktop view. I'm not very good with CSS. Please can some one help me with this? https://prthisandthat.com

Site URL: https://www.trishthomasmeyer.com/ Once I enter my site, I want to see this view (menu expanded) - is this possible?

Site URL: https://www.nickwaldinger.com/ Hello, My header uses a folder to house my primary navigation (see attached screenshot "Desktop"). It works perfectly on desktop, but on mobile it goes to a menu screen that shows the folder, and then I have to click the folder name (the folder is named with a plus sign "+" ) to see my primary navigation. I'd like for it to be when I click the mobile menu icon, my primary navigation comes up and skips the folder. I've attached two screenshots; "1" shows how it currently works, and "2" shows how I'd like it to work. Also, I'd like to hide/remove the "back" button above my primary navigation. Does anybody know how to do this? Thank you!

Site URL: https://bumblebee-oboe-2bhw.squarespace.com/ Hello, is there a way to decrease the height of the mobile menu bar? I'd like it to have smaller margins/padding on the top and bottom so that it takes up less vertical space on the screen. Please see the attached screenshot with my markup/notation in pink. 💙 I've tried adjusting this through custom CSS but have not yet found a solution. Thanks so much for your help! I would be so grateful to solve this.

Site URL: https://www.suemcnenly.com/ Hey. I am using a cover page with my 7.1 site using custom code. Upon entering, I don't want people to be redirected to the cover page when tapping on my logo in the site header. I want it to keep them inside the site, and bring them back to the actual home page. Going back to the cover page and re-entering every time you want to go back to home is annoying. I did this once before, then changed, and can no longer figure out how I did it...what custom code I used. Thanks.

Hello squarespace community, I've always disliked the way that squarespace shows it's menu options in the mobile view, but I've never been able to get the code right to fix it. Instead of showing the nested view after clicking a folder, I would like for the available pages to smoothly display underneath that folder as a drop down menu with the appropriate arrow directions too. This means hiding the 'back' link which I think have the right code for: .header-menu-controls-control[data-action="back"] { display: none; } I've attached a rough example of what I would like for the menu to do. HUGE thanks if you can also help with the CSS for the arrows to display on folders in the desktop view too!!

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://www.madorra.com Hi everyone, I'd like to know if there is custom css I can use to avoid the need to "double click" my dropdown "menu" folder on mobile to see the options - see screenshots for reference. On desktop I just have the "menu", when I hover over it you see the different areas of the page that you can smooth scroll to. On mobile, you need to click the hamburger icon, which THEN brings you to the "menu" overlay THEN you need to click into that to see the options. Anyway around this?