tuanphan

Add to Design > Custom CSS

/* Fix align mobile menu */
@media screen and (max-width:991px) {
.header-announcement-bar-wrapper {
    padding-bottom: 6vw !important;
}
}

Suppose your site url is sophietnc.squarespace.com

You can access this url: sophietnc.squarespace.com/config/safe

It will disable code in Edit Mode, then you can edit everything easier in edit mode

On 3/31/2023 at 8:44 PM, SebG said:

Hello again @tuanphan
As I mention, I managed to change the logo for a different one on my home page only.

That works on the computer browser but I notice it does not work on the mobile version, it still shows the normal logo.

The code that I paste on the home page to change it is:

<meta name="facebook-domain-verification" content="26n6zcyj3h5175htuyob39h0hfc0o4" />

<style>
  .header-title-logo img {
    visibility: hidden;
}
  .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/619e77369696e6457e9209eb/t/6419f238c47b3325e502a05f/1679422008311/Website_Logo_v01center130px_WHITE.png);
    background-size: cover;
    background-repeat: no-repeat;
}
</style>

 

-

It is a code I copied from here.

So, what should I do to change the logo on the mobile version of the home too?

my website:

www.sebastiagalbany.com

Thanks in advance.

Use this new code

<style>
 header#header img {
   content: url(https://static1.squarespace.com/static/619e77369696e6457e9209eb/t/6419f238c47b3325e502a05f/1679422008311/Website_Logo_v01center130px_WHITE.png);
}
</style>

On 3/31/2023 at 6:50 PM, lina1570047784 said:

 

Hi, this is what I've been looking for ...  the header to go away when scrolling down, but reappear when scrolling up. I have Wexley 7.0 and this code doesn't work. I Do you happen to know if there is a code for this? Thanks in advance.

Can you share link to your site?

On 3/31/2023 at 6:21 PM, shelbyodom said:

This is awesome, thank you! Is there a way for me to make the hover use an icon with a transparent background?

Hi,

make the hover use an icon  > What do you mean? Can you share link to your site?

On 3/31/2023 at 5:33 PM, Michelle777 said:

Hi Tuan, yes sure, it's www.clearenergytherapy.co.uk

Thank you! 

Your font-face code missing some characters. Use this new code

@font-face {
    font-family: minervamodern;
    src: url(https://static1.squarespace.com/static/63d3d0c937b09408f17db985/t/64245808a621432b903366ea/1680103433057/MINERVAMODERNRegular.otf);
}
.header--menu-open .header-menu-nav-folder-content a {
    font-family: minervamodern;
    font-size: 30px;
}

Add this to Design > Custom CSS

body {
	background-color: black;
}

On 3/31/2023 at 11:36 AM, jjk291 said:

Hi!! is there an update to this code for 7.1.
Also would like it to slowly fade in while scrolling.

Much appreciated!!! 

Above code for 7.1. If it doesn't work, please share link to your site

On 3/31/2023 at 10:43 AM, BobInAustin said:

Hey @tuanphan

Yes, homepage. 

Here is a link to that person's website: https://www.johngreenbooks.com/

I very much appreciate the help, Tuan. 

Add to Design > Custom CSS

/* Sticky Section Homepage */
@media screen and (min-width:768px) {
body.homepage #page>article>section:first-child {
    width: 50% !important;
    float: left;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    height: 100vh;
    z-index: 999999999 !important;
}
body.homepage #page>article>section:not(:first-child) {
    margin-left: 50%;
}
footer.sections {
    z-index: 99999999999999999999999999999 !important;
}
}

You can setup password & share url, we can help easier

On 3/31/2023 at 7:53 AM, kellicox90 said:

I have the same problem, jump links across my site aren't underlined when active.. any solutions?

URL https://lime-raspberry-ywg5.squarespace.com/

PW GSR123

Jump links are all in the services folder and on the /towing page (alternative navigation)

Any help much appreciated 🙂

You mean links on this dropdown?

Change to this code

//--- SCALE PORTFOLIO TEXT ---//
h3.portfolio-title  { 
transition: all 1s cubic-bezier(0,.2,0,1);
}
a.grid-item:hover .portfolio-title  { 
    transform: scale(1.05);
}

Hi,

Can you share link to your site? We can check easier

With Colored nav bar, add this to Design > Custom CSS

/* Fullwidth Nav background */
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    flex: 100% !important;
    flex-direction: column;
    width: 100% !important
}
.header-display-desktop {
    flex-direction: column
}
.header-announcement-bar-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0px !important;
}
.header-nav-item--divider {
    padding: .1rem 0;
    border-right: 1px solid #000 !important
}
.header-nav {
    width: 100% !important;
    background-color: #20417f;
    padding-top: 5px;
    padding-bottom: 5px;
}
div.header-nav-item>a {
    color: white !important;
}

With Phone/Search

Do you use Personal or Business or Commerce Plan?

Hi,

Can you share link to shop page? We can check easier

#1. I don't know this

#2. Use this new code

.sqs-audio-player {
    background-color: unset !important;
    box-shadow: unset !important;
    border: none !important;
}
.sqs-audio-player .controls {
    border: 1px solid black;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,0,0,.8);
}

It will apply all pages

Hi,

Can you share link to page where you use gallery? We can check easier

Hi,

Can you share link to product in screenshot?

On 3/31/2023 at 3:25 AM, Kaydi said:

Heya I am trying to get this to work, but the float left code won't work.

https://www.otumoetaihockey.co.nz/events/trainings-womens-19

Trying to get the buttons to be left aligned, same with the text above

It looks fine to me

If site is in trial/unpublished, you can follow this guide to know how to share url

Add to Design > Custom CSS

[data-section-id="6420b7fbbe18e65314005460"] {
    z-index: 9999999;
}

The url doesn't work. Can you check it again?

On 3/31/2023 at 2:16 AM, Lesh said:

Hi,

I have a similar issue. Site url: http://daybreakbrokerage.com/mortgage.
My client is a brokerage company and has a third party mortgage calculator widget on a page that isn't responsive on mobile (which the mortgage company says should be and believes Squarespace has some kind of code that is interfering). I've tried adding div tags and custom CSS similar to what was initially tried for the Google Map but it hasn't worked. Should I add something similar to the code you suggested earlier: 

/* GG Map */
iframe.responsive-iframe[src*="maps"] {
    width: 100% !important;
    height: 700px;
}

use this

@media screen and (max-width: 767px) {
    iframe#DaybreakId {
        width:100% !important;
        min-width: 350px !important;
        height: 1600px !important
    }
}

Hi,

You mean change current icon to custom icon?

Hi,

What is site url? We can help easier