lu.diehl

On 6/20/2022 at 12:39 PM, sandracheesman said:

I would like to be able to do the same, the site is 

https://capybera-beige-b8fr.squarespace.com/

p/w: NCSdataman

Many thanks in advance 🙂

 

Here's a plugin from @ChrisSE :

https://schwartz-edmisten.com/shop/modern-mobile-menu-dropdown-for-squarespace

10 hours ago, ACScruggs said:

Hello - @lu.diehl. The code you shared at the beginning of this thread worked great for me. However, I'm trying to get the image (logo mark) centered on mobile and tablet view. I added   position: center;   to the code provided but wasn't successful in getting it repositioned. Do you know how I can make that happen?

Many thanks!

Hey @ACScruggs-- can you share a link to your website? 

@luisgonzalez- were you able to fix it? because I don't see any logo when viewing the site on desktop or mobile.

4 minutes ago, luisgonzalez said:

@lu.diehl thanks for that, it helped! Any way to do the same for mobile? Links still appear on mobile but desktop is fine.

Are you using a brine template family? Better yet, can you share the link to your site?

Hi @Adam9 - if that is one of your website colors, you can go to your first section and change the background color of that section. The navigation inherit the color of the first section in the Squarespace 7.1 version.

Let me know if this worked!

@mabros - are you planning to switch to bedford or you'll stay with brine? The CSS change depending on the template and I can only help with the current template installed. Also, I don't see a slideshow on your site. Can you share the page where the slideshow or banner you want help with is located? 

@mabros - can you share the link to the page you want to hide the banner?

7 hours ago, tantrum said:

Hi-- I was trying to get this to work on Avenue, which is almost did, only issue is the grey box under the shortened height image in the gallery.   Was this resolved?

Hey @tantrum - try adding the code in the response above, if it doesn't work since it is a different template please share a link to your website (and psw if needed)

@Monte63 - sorry for the late response. 

Let me know if this works:

.collection-type-page.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow {
	height: 450px !important;
	background-color: #FFFFFF;
}

@media only screen and (max-device-height: 640px)
.collection-type-page.has-promoted-gallery.transparent-header #promotedGalleryWrapper .sqs-gallery-block-slideshow, .collection-type-page.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow {
	height: 200px !important;
	background-color: #FFFFFF;
}

Hi @Monte63 - can you share a link (and password if protected) to your website?

18 hours ago, squick said:

thanks for this! any guidance on setting the mobile width would be greatly appreciated. the 640px limitations constrains iphone 11 well, but not ipad ... is the trick to simply increase the min-device-width? recommendations? Thanks!

Yes, you can actually change the min-device-width to whatever you want, but for general iPad layouts use 768px. 

//* For general iPad layouts *//

@media only screen and (device-width: 768px) {
  /* Code goes here */
}

13 hours ago, DaleBoettcherPhoto said:

Lu.diehl, thank you! Is there a way to make this so that it does not affect the mobile version?

Hi @DaleBoettcherPhoto, the code I wrote before isn't great actually... I would try it differently this time. If you're looking to change it only in one page then add the code below to the page setting > Advanced instead of adding it the general Custom CSS.  If you're looking to change it all pages, add it to Design > Custom CSS and remove the <style> tags.

<style>
@media only screen and (min-device-width: 640px){
  .promoted-gallery-wrapper {
    height: 500px!important;
  }
  .sqs-gallery-design-stacked-slide {
    height: 500px!important;
}
  .sqs-gallery-controls .next, .sqs-gallery-controls .previous{
    top: 250px!important;
  }
}
</style>

Let me know how it looks... if you need further help, please share a link to your website. 

Hi @AThompson_social - I've used this in the past and it worked well for me on Brine template:

1. Add this to Settings > Advanced > header code injection:

(Change the scroll height you wish to change the color, here it is set to 400 px)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>  
 $(window).on("scroll", function() {
    if($(window).scrollTop() > 400) {
        $(".Header").addClass("on-scroll");
    } else {
       $(".Header").removeClass("on-scroll");
    }
});
</script>

2. Add this to Design > Custom CSS 

Change the background color you wish to use. If your navbar is transparent at the starting point, then remove the last piece of code (.Site-inner)

.Header{
  background-color: blue!important;
  position: fixed!important;
  transition: 0.2s all linear;
  -webkit-transition:background-color .4s;
  -moz-transition:background-color .4s;
  transition:background-color .4s;
}

.on-scroll{
  background-color: red!important;
}

.Site-inner{padding-top: 50px;}

Let me know how it goes! Your website is pwd protected... if you want further help, please share the password 😉

@New_Designer try looking for the image block ID. The block ID starts with "block-" followed by a set of numbers, for example: id="block-5a6263c01ea450cffcf0" as shown in the image attached. If you need further help, please share a link to your website 😉

If you use the Google Chrome browser there is this really helpful extension called the Squarespace Collection/Block Identifier which saves me time identifying any block ID in Squarespace. It shows the Squarespace page collection ID and permanent block IDs when you enable it. 

https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

You add the code to the blog page you want to remove the metadata, and not to the site wide custom CSS. To do so, go to your portfolio page settings, choose Advanced > Page Header Code Injection and add the code between <style> </style>

If you want further help, please share a link to your website 🙂

Copy and paste the code below to your Custom CSS. Change the height value to what you want. Let me know if this works... 

.collection-type-page.has-promoted-gallery #promotedGalleryWrapper .sqs-block, 
.collection-type-page.has-promoted-gallery .promoted-gallery-wrapper .sqs-block, 
{
	max-height: 500px!important;
}

.sqs-gallery-design-stacked-slide {
	height: 500px!important;
}

@Emmyk1 can you share a link to your website?

6 minutes ago, Graemetg said:

Hi @lu.diehl thanks for your answer, very useful and should work I think.

It's not for me though, I answered the original question - I was just wondering if @doshea could use text instead of an image for the logo, in particular in the footer.

Hi! Thanks for pointing it out! 🙂

Hi @doshea Find the unique ID of the image, change "#block-unique-ID" to your image ID and apply the code below:

/* mobile screens */
@media only screen and (max-width: 640px) {
  #block-unique-ID{
  width: 50%;
  }
}

/* tablet screens */
@media only screen and (max-width: 768px) {
  #block-unique-ID{
  width: 100%;
  }
}

Let me know if it works 😉 If you need further help, please share a link to your website and pwd if needed.

The code you have should work, but if you want me to take a look please share a link (and pwd if needed) to your website.

/* HIDE THE PRIMARY NAVS */
#collection-5d58db8548099500014d80bb .Header-nav--primary {
   display: none!important;
}

/* HIDE THE PRIMARY AND SECONDARY NAVS */
#collection-5d58db8548099500014d80bb .Header-nav {
   display: none!important;
}

Hey @NotAHologram, can you share a link to your website and pwd if it is pwd protected?