Search the Community

Hi, i'm almost ready to launch my page but I have i would like the index slide to loop back to the first slide instead of a hard/fast scroll how can i change the font size to the dropdown menus? note** I'm using a custom font caper-hypersphere-2ef9.squarespace.com password: whitebox2020

Site URL: https://nomadmassage.squarespace.com How can I change the background color of the drop-down navigation on the "Ready" template? How can I increase the navigation item spacing inside the drop-down navigation?

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.libraeducation.co.uk/home Hi, The dropdown menu on my site has white font and white background. Does anyone know how I might change that? Many thanks to anyone that can help! Oscar

Site URL: https://armadillo-buttercup-zf85.squarespace.com/ I want to increase the padding between the dropdown items on my site. They are packed in a little too tight. I was able to change the font but not the spacing.

Site URL: https://www.voyagerclub.co/gift-cards-buy I am trying to change the site style colour of the drop down menu on the value of a gift card. It is currently white with black writing and I need it to be in our gold branding. I can't find where this is on site styles, so this may need to be coded in. Please help!

Site URL: https://luxurysco.squarespace.com/config/ Hey i was wondering how to change this font and size to something bigger and a font that more professional. Please help me i've been searching for days.

Site URL: https://fpg.com I'm running into an issue where I have several folders in my primary navigation bar, but when they drop down, they get cut off by the right side of the screen. I've included an image as shown, but am hoping to add some sort of padding on the far right side of the navigation screen. Id still like my links to be right aligned, because I know putting them in the center would technically solve my problem, but am hoping to just shift all of my content over a little to the left so that you're able to read whats in all the folders. Anyone know how to solve this problem?

Site URL: https://www.laurierconsulting.ca/ Password for my site : dog2020 Wondering how to change the drop down menu under projects to have lower opacity. I am using the Lusaka Template. Any help is appreciated.

Hi, I'm using the foster template, but have changed the background color to black. I'm trying to change the dropdown menu background color from white to black as well. I've tried updating the site style as well as the css to: /* Change dropdown menu background */ .header-nav-folder-content { background: #000000 !important; } Nothing changes. Here is a link to my site https://hexahedron-lavender-ctl5.squarespace.com/. Would appreciate any help.

Hi there, I started using the Brine template, and in my product listing I have a drop down menu for size and quantity The size drop down uses a different, ugly font which is not related to the template style. Any idea on how to change this? Thanks Marika

Site URL: https://www.visionarydesignbuild.com/ I am trying to figure out how to line up the top of my nav folders to the bottom of my nav bar.

Hi, I'm in Version 7.1 and I want to increase the vertical spacing/padding between items in the drop down menu. So in the attached image, more vertical space between "Doodle Line Art" and "Lino Print Stars" etc. Also, I might want to change the font highlight colour when a submenu item is clicked on/selected, so if anyone has any code for that, it would be appreciated. Thanks

Site URL: https://tekorowaiowaiheke.org/ Hi I have an issue with the menu items inside a dropdown folder in the top level navigation of this site getting obscured. They simply fall outside of the browser window and the text is obscured. We're using the BRINE template The names are quite long but it's important for the client to have those full names there and the dropdown menu item in that spot in the navigation. Is there anything that can be done about this so the text remains visible, i.e. the dropdown not appearing to the right of the top level nav item but shifting towards the centre of the site instead when dropping down?

Site URL: https://www.bytiline.com/ Hello, I would like to change the color of the dropdown list color. What would be the custom CSS to do change the color to #1a363b ? Many thanks, Domitille https://www.bytiline.com/

Site URL: https://www.theenglishvine.co.uk/ I want to customise my dropdown menu... as you can see on the screenshot the dropdown menu gets cut off the browser screen... how do i edit this... maybe size, padding... alignment to the top nav 'shop' button?

Site URL: http://www.theeventclub.co.uk How do I add a drop down menu? For example, If hover my mouse over the 'About Me' section, how do I make it so a menu drops down with different pages to click on such as 'Weddings' 'Corporate' etc? Thanks

Hi How do you get your navigation link to centrally align with it's drop down menu. I would like the text 'Resources' to be centrally aligned with the text/box in the drop down menu. At the moment the drop down menu is hanging off to the left! Thanks!

Site URL: https://www.dbtherd.com/ Hoping someone can help - I've been using a code block + markdown block to insert a drop-down at the bottom of my recipe posts that says "click for nutrition information". It's been working fine thus far, but it didn't work for my last post (it's not hiding). I've been following the same steps, so I'm not sure what's going on. Here's the post that's giving me trouble: https://www.dbtherd.com/blog/hummus-crusted-veggies Any help is much appreciated!

Is it possible to create a horizontal drop down menu that can be applied universally to all pages? I can write one that can be added to the top of the Page Content block for individual pages but would really like to have it added to the bottom of the Header or perhaps a block that can be fit in between the two so that any change made on one page will automatically be carried over to another. Is this possible with this theme or is the sidebar the only way to create a site-wide navigation menu?

Site URL: https://www.fresherlife.co.uk/student-jobs Hello guys, I have some code that uses Javascript, this code works on ever other platform but for some reason does not work with squarespace? AJAX is already disabled and other parts of my site have working javascript. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>sort</title> <style> * { box-sizing: border-box; } /* ---- isotope ---- */ .grid { margin:0; padding:0; } /* clear fix */ .grid:after { content: ''; display: block; clear: both; } /* ---- .element-item ---- */ .element-item { position: relative; width: 49%; height: auto; margin: 5px; padding: 10px; background: #ddd; color: #262524; } .element-item p{ color:#000; font-weight: 700; } .element-item span{ color:#333; font-weight: 400; } @media only screen and (max-width: 1020px) { .element-item { width: 48%; } } @media only screen and (max-width: 620px) { .element-item { width: 99%; margin: 2px; padding: 10px; } } .control-bar{ display: flex; justify-content: space-around; padding: 20px 0; background-color: #bbb; flex-wrap: wrap; } .control-bar input,.control-bar select,.control-bar option{ padding: 10px; margin:5px; border-radius: 5px; outline: none; } </style> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> </head> <body> <h1>Our Jobs</h1> <div class="control-bar"> <div class="search"> <input class="quicksearch" type="text" id="search" placeholder="Search..."> </div> <div class="filters"> <select name="jobType" id="jobType"> <option value="*">All</option> <option value=".retail">Retail</option> <option value=".barWork">Bar Work</option> </select> </div> <div class="filters"> <select name="location" id="location"> <option value="*">All</option> <option value=".manchester">Manchester</option> <option value=".leeds">Leeds</option> </select> </div> <div class="sort-by"> <select name="sort-by" id="sort-by"> <option value="*">Original Order</option> <option value="low_to_high">Low to High</option> <option value="high_to_low">High to Low</option> </select> </div> </div> <div class="grid"> <div class="element-item leeds retail"> <h3 class="name">Content Manager</h3> <p>Job Type: <span class="jobType">Retail</span></p> <p>Location: <span class="location">Leeds</span></p> <p>Salary: <span class="salary">5000</span></p> </div> <div class="element-item leeds barWork"> <h3 class="name">Marketing Director</h3> <p>Job Type: <span class="jobType">Bar Work</span></p> <p>Location: <span class="location">Leeds</span></p> <p>Salary: <span class="salary">8000</span></p> </div> <div class="element-item manchester retail"> <h3 class="name">Web Developer</h3> <p>Job Type: <span class="jobType">Retail</span></p> <p>Location: <span class="location">Manchester</span></p> <p>Salary: <span class="salary">3000</span></p> </div> </div> <script> var filters = ['','']; var newFilters = ''; var qsRegex; // init Isotope var $grid = $('.grid').isotope({ itemSelector: '.element-item', layoutMode: 'fitRows', getSortData: { salary: '.salary parseInt' }, filter: function() { var searchResult = qsRegex ? $(this).find('.name').text().match( qsRegex ) : true; var buttonResult = newFilters ? $(this).is(newFilters) : true; return searchResult && buttonResult; } }); // flatten object by concatting values function concatValues( obj ) { var value = ''; for ( var prop in obj ) { value += obj[ prop ]; } return value; } // FILTERING (jobtype/location) $('.filters select').on( 'change', function() { var value = $(this).val(); var id = this.id; if(id === "jobType"){ filters[0] = value; }else if(id === "location"){ filters[1] = value; } newFilters = concatValues(filters.filter(function(f){ return f !== '*'; })); $grid.isotope(); }); // SORTING $('.sort-by select').on( 'change', function() { var sortByValue = $(this).val(); if(sortByValue === "high_to_low"){ // sort highest number first $grid.isotope({ sortBy: 'salary', sortAscending: false }); }else if(sortByValue === "low_to_high"){ // sort lowest number first $grid.isotope({ sortBy: 'salary', sortAscending: true }); }else{ return; } $grid.isotope({ sortBy: 'salary' }); }); //SEARCH var $quicksearch = $('.quicksearch').keyup( debounce( function() { qsRegex = new RegExp( $quicksearch.val(), 'gi' ); $grid.isotope(); }, 200 ) ); // debounce so filtering doesn't happen every millisecond function debounce( fn, threshold ) { var timeout; threshold = threshold || 100; return function debounced() { clearTimeout( timeout ); var args = arguments; var _this = this; function delayed() { fn.apply( _this, args ); } timeout = setTimeout( delayed, threshold ); }; } </script> </body> </html>

How can I make the text left aligned in a drop down menu? I thought it might have been an option in the site styles but can't see it. I've seen other website using the same template (Bedford) with left aligned drop down menus so I know its possible. Website is www.gem.uk Thanks in advance

Hi, does anyone know how to reduce the width of a dropdown header menu (from a Folder) in 7.1.? I am building a multi-lingual website, and the menu looks quite odd being significantly wider than the options (see screenshot). Any help would be great!

I'd like to customize the way folders display on mobile (Bedford template) by manipulating CSS rather than switching to developer mode and changing the html. I want the folders to default display as expanded rather than users having to use the shitty + icon as a drawer drop down. OR If it's easier to manipulate the display style of the drop down icon I'd like it look/act the same way as the main mobile drop down nav with the 3 horizontal bars. Please help.

Hi, please see attached screenshot. I would like my SHOP menu folder to be in two columns with work for sale on the left (Sand Dunes through Books) and information about the work and additional items on the right (About Our Prints through Give the Gift of Art). Right now it is one long menu. At one point I searched this forum and someone posted custom CSS that broke folders into two columns. You could select which drop-down folder to turn into columns and how many columns. This was a great start but you could not determine WHERE the break occurred, it simply broke it up evenly so if I had more than 3-4 pages the product pages would spill over into the information column and be included on the right instead of the rest of the works on the left. Regardless, the link is now dead for this post and so I can not find the CSS script. Basically: I would like a custom CSS that allows me to always have my work for sale separated from the information about the work and make it manageable to sort related works/locations into columns in the future. Ideally, I would have a mega menu with ways to view collections by popularity, theme, etc. but that seems beyond SquareSpace's capabilities at this point (like so many things...). See second attached.