Alternate Logo with Transparent Header in Squarespace 7.1

Поділитися
Вставка
  • Опубліковано 19 вер 2024

КОМЕНТАРІ • 35

  • @bradbrown9877
    @bradbrown9877 Рік тому +1

    Hey man! I know this is a little bit dated now, but I just wanted to say thanks. It still works great on the latest SS update. Saved me a lot of headache. Cheers.

  • @jenniferhammervald
    @jenniferhammervald 2 роки тому +1

    Thanks for this! Found this tutorial about a year ago and I finally got to use it in a project! Works so great! Keep up the awesome work!

    • @SEWebDesign
      @SEWebDesign  2 роки тому

      Thank you! I'm glad it worked for your project!

  • @JaiSequoia
    @JaiSequoia Рік тому +1

    This is such a nice customization trick. Recently used it and it took things up a notch.

  • @cameroncd
    @cameroncd 2 роки тому +1

    Exactly what I was looking for, and taught me how to find it myself in the future (and understand it!). Thank you!

    • @SEWebDesign
      @SEWebDesign  2 роки тому

      I'm glad it was helpful Cameron!

  • @westcoastwildwoman7925
    @westcoastwildwoman7925 2 роки тому

    This was SO useful, thank you!

  • @BrentMurrell
    @BrentMurrell 21 день тому

    Crushed it. As great as Squarespace is they really need to solve some of these customization issues because it really limits creativity.

    • @SEWebDesign
      @SEWebDesign  20 днів тому

      Thanks Brent! I totally agree

  • @jill.k
    @jill.k 3 роки тому

    thank you for this!!

  • @codydennison2135
    @codydennison2135 3 роки тому +1

    VERY COOL. Any idea how to compensate for the flicker when the logo is replaced?

    • @SEWebDesign
      @SEWebDesign  3 роки тому +1

      Is it happening on the live site as well?
      If so, you could set up a CSS animation to fade in the logo on page load.

  • @avelaed
    @avelaed 2 роки тому

    Thank you!

  • @therunawayheartsfilm
    @therunawayheartsfilm 3 роки тому

    Thanks for this video! I can't get it to work on my individual product pages though, are there any solutions for this? Thank you

  • @jasperbalba7429
    @jasperbalba7429 Рік тому

    HI can I add a motion graphics with transparent background? For example, a video logo with transparent background so I can overlay it on text or other stuffs

    • @SEWebDesign
      @SEWebDesign  Рік тому +1

      The logo accepts image types, so .jpeg, .png and .gif

    • @jasperbalba7429
      @jasperbalba7429 Рік тому

      ​@@SEWebDesign I mean a motion graphics

    • @SEWebDesign
      @SEWebDesign  Рік тому +1

      @@jasperbalba7429 it's very difficult to do transparent video on the web. Google video with transparent background on the web as there are some articles about it. I have only done it once for a client and haven't done it since. It was a pain in the butt.

  • @tprasanth6852
    @tprasanth6852 4 роки тому

    Hey how to hide a image in mobile device but it should be shown in desktop view ?

    • @SEWebDesign
      @SEWebDesign  4 роки тому

      Look up "css media queries" you will want to use a max-width media query with a pixel value of 640px.

  • @astropadre
    @astropadre 2 роки тому

    For some reason, the "transparent" toggle button isn't appearing for me?

    • @SEWebDesign
      @SEWebDesign  2 роки тому +1

      Squarespace has since updated the UI. They now call it "dynamic" header style when editing the header.

  • @kylepalmer4833
    @kylepalmer4833 4 роки тому

    Is their a way to do this on Squarespace 7.0? Im still using a brine template on 7.0 and don't want to go through the hassle of recreating my site on 7.1.

    • @SEWebDesign
      @SEWebDesign  4 роки тому

      Yes I have another video for Brine family templates on my channel!

    • @kylepalmer4833
      @kylepalmer4833 4 роки тому

      @@SEWebDesign found it thank you. I was also trying to find out how to add the underline/bottom boarder on the header like on your website.

    • @SEWebDesign
      @SEWebDesign  4 роки тому

      @@kylepalmer4833
      #header {
      border-bottom: 1px solid #fff;
      }

    • @kylepalmer4833
      @kylepalmer4833 4 роки тому

      @@SEWebDesign is their also a way to have the logo change from white to black when you scroll

    • @kylepalmer4833
      @kylepalmer4833 4 роки тому

      I actually figured it out. by adding to header branding
      -webkit-filter: invert(100%);
      But I only want it to do it to the first page. Do you know what the code would be?