Search the Community

I've tried changing styles for the section...and I can't figure out why it's just a white box. How do I fix it?

Hello, the dropdown view on desktop is great. I cannot replicate it in the mobile nav. This is what I have set up: .Header-nav-folder a {border-bottom:1px solid #ffffff} .Header-nav-folder{box-shadow: 5px 5px 15px rgba(0,0,0,0.25)} .Header-nav-folder a {padding-bottom:.5rem!important; } .Header-nav-folder{background:linear-gradient(to bottom, #fccb90,#f6854e) } /* dropdown items color */ .header-nav-item:hover a { color: #b0ddc9 !important; } .header-nav-folder-item a { font-color: #b0ddc9 !important; } #mobileNav .main-nav.mobile-nav a { background:linear-gradient(to bottom, #fccb90,#f6854e) } /* mobile dropdown items color */ .main-nav.mobile-nav hover a { color: #b0ddc9 !important; }

Hi all https://coconut-grasshopper-b736.squarespace.com password - gingerkev re my header - id like to put extra space between 'testimonials' and 'info@kevinmoran.co.uk' only....can anyone help with css? Many thanks Kevin

Hello, thanks for all your help so far from everyone. Someone so graciously showed me how to move my mobile "book" button up as it was covered by my information bar. Now Im finding they are not aesthetically pleasing with my social links, they look way too close together. Pic below. Anyway I can move them up a tiny bit?

Site URL: http://www.buttercup-chartreuse-ptns.squarespace.com Hello! I am building a site using version 7.1. I finally worked through the desktop navigation menu and now I'm stuck with changing the style of the mobile menu. The spacing and alignment's looks very disorganized. I don't know why the font of third menu item Plans is so much bigger than the other two, and the back button is separated from the arrow into two lines. The first image is what it looks like right now, and the second one is how I want it to look. Having all the menu and submenu items align with the logo to the left, change the spacing and font size. And maybe change the font color of the submenu item when its clicked. It'd be greatly appreciated if anyone can help me with this css. The link to my site is here: buttercup-chartreuse-ptns.squarespace.com

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!!

Site URL: https://risedigital.tech Hey Squarespacers! I installed a Google Review badge on my site, which presents a problem with the nav button in the mobile menu (7.1). Not sure if the best approach is to try and remove the badge when mobile menu opens, or move the button up so it's not covered by the badge (I think I prefer the latter). Any bright ideas how to fix this with CSS?

When Im on my mobile menu, the book button hides behind the mobile information bar. Photo attached. How do I fix this via coding?

Hello all! My client has the marquee template for her site and the drop down mobile menu doesn't work. How can I help resolve this?

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

Hey guys - is there anyway to make the lines thicker on the hamburger menu icon on https://mandolin-spinach-fnj6.squarespace.com/ pword: 1234 Current code: //menu for web// .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible;} Thanks!

Hi, I use a code on this website to make a hamburger menu on desktop so I think thats the problem with following: I want to hide the header and footer on a salespage and this code in the advanced tab doesnt work: <style> #header, #footer-sections { display: none!important;} </style> Can anyone help me with a code to do so? PW: Anahata12

Hello! i’d like to turn my nav menu into a collapsed hamburger menu and turn the options into filters to the projects below. Both on Desktop and Mobile. For mobile also I’d like to make sure the menu is on the left instead of on top. thanks!

Hello, I have added a folder to the menu bar which works in desktop view however when you are on mobile the overlay menu shows the folder 'menu' first and then with in that the list of linked pages. Hoping there is a resolve to bypass the menu folder showing. Also is there any way to reduce the font size in mobile view. Any help is hugely appreciated. Thanks

Hello, I changed the size of my mobile menu font with css but it doesn't apply to Weglot language switcher (see image attached) Any idea how I can fix this ? Here is the CSS I used : .header-menu-nav-item a { font-size: 15px;

Hi, I'm new here. I have 3 questions: 1) I'm wondering how to customize the lightbox on this website with code? I want the background to be solid white and for the description to show below the image. Also for the image to be larger. Is there any way to have a title and a description, or only description? The lightbox here is great but I don't have any idea how to do it: https://www.lucasmasch.com/ 2) How do I get the dropdown links under 'work' to align the other way? The menu is too wide and the links align right instead of left. 3) The margin between the menu and content on the 'Shop' page is enormous. I don't see any function to make it less so I guess I have to do it with code, but don't know how. Website: https://cod-giraffe-b6w7.squarespace.com/ Haven't published the site yet so the password is 'sunflower'. Thank you for your help!!!

Hi, Thank you for all the help, I need a little advice here. How can I move the cart next to the menu burger for mobile view? Attaching an image of how I want it to look like. My website: www.andreydanilov.com Thanks! A

Hi, in my menu navigation I've created a folder with some pages. But, is it possible to click on the folder title and link to a specific page? Or the folder just contains pages and that's all? Thanks

Used the Asset Library, and I guess it works... but... 1. What bothers me is that I can't add custom folders. For me who have loads and loads of images. It would be perfect to be able to add each sections images to a separate folder, and add an individual name to it. In addition it would, I guess, reduce the stress on the performance trying to generate thumbnails of 1000s of images each time I try to fint a specific one. 2. It would also be perfect if I could search on a title and remove duplicates. Because right now - the search function seems to be out of order.

Site URL: https://impala-nectarine-4s9h.squarespace.com/config/design Hi, I have created multiple stores within my site for different styles of product and then put categories within each store. When I go onto the main page of my store, there is a menu linking to all the different categories of products, but when you go onto the page of a category, the navigation to all the other categories dissappears, is it possible to keep this navigation on all category pages and not just the main store page?

I cant find a way of centring the mobile menu drop down using the desing options. It means I cant click on any of the options whne using a phone. Do I need to customise the CCS. Thanks in advance!

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

Hello, I am wondering if there is a way to change the size of the dropdown navigation links but NOT the dropdown menu title. I am using 7.1 My site: davidjcavallo.com Please see screenshot for specifics. Many thanks in advance! Kind regards, David

Site URL: https://coconut-grasshopper-b736.squarespace.com/config/pages/632491ecd2457c0d3e60fa0e?p site password : gingerkev Hi Re tablet - i want to reduce space between logo/burger and text section below - see first pic attached. If i enter following code.... : /* header on tablet only */ @media screen and (max-width:991px) and (min-width:768px) { .header-title-nav-wrapper { margin-bottom: -30px; } } ..the logo comes down successfully but burger icon stays where it is...see second pic. Any ideas how i can get burger down level with logo would be most appreciated! Thanks Kev

Site URL: https://coconut-grasshopper-b736.squarespace.com/config/pages/632491ecd2457c0d3e60fa0e?p site password : gingerkev Hi all with regards specifically desktop I've added the following CSS code to get the nav page menu to sit level with base /bottom of logo: /*align nav desktop */ .header-title-nav-wrapper { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } It does a good job but the menu to the right sits just above the base level of the logo- though the line underneath 'case studies' is level , but not text itself. NB: note my uploaded logo is cropped tightly to bottom of 'kevin moran'. I know I can effectively move that menu text down that little bit extra if i play around with 'line height' setting in site styles - but then i end up with the line being too low... I'm a bit of a perfectionist so any ideas re custom CSS would be really appreciated! Thanks in advance Kevin