Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by JuBalas

  1. Hi @alxfyv

    i'm referring to your 5 years old post below. I need to do exactly the same as @jeffreymark but can't make it work on my Brine template. (It's a client website i'm working on so i can't share the website address, it's not live yet).

    I followed your instructions and add this exact peace of code in the css properties :

    @media only screen and (max-width: 640px) { .collection-type-template-page #outerWrapper  { background-image: url("https://static1.squarespace.com/static/5d94a9d780be461d94a3a7c6/t/5e218fddbb909c4a01c07e26/1579257826981/ImmeubleTLH_exterieur_versionfoncee_formatweb_V2.jpg"); background-size: cover !important; 

    Did i miss something ?

    Thank's in advance for your help !



    On 10/4/2015 at 4:08 PM, alxfyv said:




    Hi Jeff,

    The background image and related CSS properties the home page currently has (at desktop sizes) are:

    .collection-type-template-page #outerWrapper  {  background-image: url("http://static1.squarespace.com/static/560d7230e4b0a4c7e9582606/t/560e9ee2e4b01316733a433f/1443798754915/sitebghome.jpg");  background-position: center center;  background-size: cover;  background-attachment: fixed;  background-repeat: no-repeat;}


    For an explanation of what the various background properties mean and do, see the w3schools' article CSS Background and the MDN article background.

    You must have uploaded the current background image to Squarespace. If you don't want to do the same again with another image but want instead to use an image off the web, just substitute the url to your new image for the current url (http://static1.squarespace....) and put the CSS in Design > Custom CSS. You needn't put all the background property declarations in Custom CSS, just the ones you modify.

    If at first it seems not to work, add !important to the individual declarations. Thus, e.g., background-size: cover !important;.

    Whatever declarations you change, you will need to enclose them all in a media query. Thus:

    @media only screen and (max-width: 640px) {  .collection-type-template-page #outerWrapper  {    /* property declarations here */  }} 


    I hope this answers your question. If not, let me know.


  2. Thank you so much to both of you !

    Here are some more precisions about the way to do it :

    1/ Each page has a specific collection number, so if you want to hide the navigation bar on a specific page, go on this page and find the page's collection number

    2/ Replace the collection number in the following code by yours

    #collection-5dcedd5eb702913cebc23c32 .Header-nav {
       display: none!important;

    3/ Insert the code in DESIGN > CUSTOM CSS

    4/ If you need to hide your navigation bar on several pages, follow the first 3 steps for each page. Your custom CSS window will look like this 

    #collection-5dcd70869ea30043a7d107f7 .Header-nav {
       display: none!important;
    #collection-5dcd7c15efe0ea08ad8167ac .Header-nav {
       display: none!important;
    #collection-5dcedd5eb702913cebc23c32 .Header-nav {
       display: none!important;



  3. Hey hi, 

    i have seen on the forum the exact same question i'm posting right now but none of the answers work for me so here i am.

    I’m trying to remove the navigation bar from a specific page on my maple inn template (brine family). I'v read that i should insert this code :

    body#collection-5d58db8548099500014d80bb nav.Header-nav.Header-nav--primary {
       display: none;

    But it doesn't work. Is there another way to do it or should i modify something in the code ?

    Thx in advance for your help ! 


  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.