Make heading not a link

Is there a way to disable the "visual art" link and make it not functional. Unfortunately it displays all my art at once and it looks just awful. I prefer visitors looking at my art by clicking on different categories. 

Thanks.

Ludmilla

Just drag it from Pages > Main Navigation to Not Linked (If you want it invisible)

If you want to disable link, add this to Design > Custom CSS

div.header-nav-item:first-child>a {
	pointer-events: none;
}

Very cool. Thank you so much. I dropped the css snipet into the custom css and voila. It's not a link anymore. It's been years since I  messed with css. 🙂 

Would you be able to help me to get rid of the ALL above the category title. See attached screen shot. If not, that's OK I can live with it. 

One more question. I'm searching for a template which would have a vertical navigation like "Wells" template. But I was told by the support that Wells is a previous version of Square and I cannot import my products into a previous version of Square. Kind of a bummer since there isn't a vertical nav in this Square version. 

Thanks again for your help. Much appreciated.

Ludmilla

#1. What is site url? I can check easier

#2. This is possible with your template, but need some code, I need site url to check this

https://www.ludmillasart.com

thanks!

#1. Add to Design > Custom CSS

/* remove All */
nav.nested-category-breadcrumb {
    display: none !important;
}

#2. Use this CSS

/* Float header */
@media screen and (min-width:992px) {
  .header-title {
    position: fixed;
    top: 3vw;
    left: 5vw;
    z-index: 9999;
}
.header-nav {
    position: fixed;
    top: 10vw;
    left: 5vw;
    padding: 0 !important;
}
  nav {
    flex-direction: column;
  }
  div.header-nav-item {
    margin: 0 !important;
    text-align: left !important;
}
  div.header-nav-item  a{
   display: inline-block;
}
.header-actions.header-actions--right {
    position: fixed;
    left: 5vw;
    bottom: 2vw;
    justify-content: flex-start !important;
}
.header-actions--right .header-actions-action a {
    margin-left: 0 !important;
    margin-right: 2.5vw;
}
#page article section {
    max-width: 90%;
    margin-left: 10%;
}
}

Sorry for being dense. Am I dropping both #1 and #2 into the custom CSS?

And do I keep the one I dropped in in the first place?

div.header-nav-item:first-child>a {
	pointer-events: none;
}

14 hours ago, Ludmilla said:

Sorry for being dense. Am I dropping both #1 and #2 into the custom CSS?

And do I keep the one I dropped in in the first place?

div.header-nav-item:first-child>a {
	pointer-events: none;
}

Yes. Keep all three code in CSS box

thank you!  

You are a genius! 😍

 I noticed that those little icons (insta, twitter, shopping cart) got moved to the bottom of the page. is there a way to bring them back up to the top right corner of the page. It seems they get lost at the bottom. See screen shot. Also can you bring the nav up a bit. sort of aligned with the text? See screen shot.

Many thanks. 

Ludmilla

Actually I'm fine with the navigation being a bit lower. It looks really good on the secondary pages. So no worries there. The only thing I would much appreciate if you can help me to move the icons Especially the Shopping Cart at the top right.

Many thanks. 

Ludmilla

On 7/31/2023 at 11:17 AM, tuanphan said:

#1. Add to Design > Custom CSS

/* remove All */
nav.nested-category-breadcrumb {
    display: none !important;
}

#2. Use this CSS

/* Float header */
@media screen and (min-width:992px) {
  .header-title {
    position: fixed;
    top: 3vw;
    left: 5vw;
    z-index: 9999;
}
.header-nav {
    position: fixed;
    top: 10vw;
    left: 5vw;
    padding: 0 !important;
}
  nav {
    flex-direction: column;
  }
  div.header-nav-item {
    margin: 0 !important;
    text-align: left !important;
}
  div.header-nav-item  a{
   display: inline-block;
}
.header-actions.header-actions--right {
    position: fixed;
    left: 5vw;
    bottom: 2vw;
    justify-content: flex-start !important;
}
.header-actions--right .header-actions-action a {
    margin-left: 0 !important;
    margin-right: 2.5vw;
}
#page article section {
    max-width: 90%;
    margin-left: 10%;
}
}

 

In this code

Change this

.header-actions.header-actions--right {
    position: fixed;
    left: 5vw;
    bottom: 2vw;
    justify-content: flex-start !important;
}

to this

.header-actions.header-actions--right {
    position: fixed;
    right: 2vw;
    top: 2vw;
    justify-content: flex-start !important;
}

Thank you so much for your help. Works like a charm. Love it!

Ludmilla

Hi tuanphan

Surprisingly I have another request. I have created a new page. And a Blank Page > Gallery. 

Links is AI Gallery:

https://www.ludmillasart.com/gallery1

The issue with the page is that it is way to wide and left side runs into the left navigation.

Is there a way to make the block displaying the images not as wide? There is no way to control it from the edit page. Just the gallery page (and any other gallery pages I will be creating). The products pages look great. 

Thank you so much~!

Ludmilla

#Option 1. You can adjust this code

#Option 2. You can add this code to /gallery1 Page Settings > Advanced > Right box

<style>
  @media screen and (min-width:768px) {
  #page article section {
    max-width: 80%;
    margin-left: 20%;
}
  }
</style>

Thank you so much. I had no clue one can insert style sheet code into a specific page . Again, it works like a charm.

Thanks! 

Ludmilla

On 8/27/2023 at 5:15 AM, Ludmilla said:

Thank you so much. I had no clue one can insert style sheet code into a specific page . Again, it works like a charm.

Thanks! 

Ludmilla

With Page Settings, just hover page name on Main Navigation or Not Linked > You will see a gear icon on right > Just click on it > Advanced > You will see a right box

Here I'm again with another question. On this page https://www.ludmillasart.com/gallery1

I inserted sections called "text boxes" to title the different galleries, Out On the Farm, City Life, etc. However editing the appearance of the text box section is very limited. It's too high right now, there is enormous amount room above and below the actual text creating a lot of useless space especially on mobile devices. The text box  section has "rows", which I'm able to increase but the minimum is set to 4 which makes it too high when there is only one line of text.

I looked into the source code hoping to find the style for this particular section but I'm way too rusty. 😞 There must be a way to override it and change the minimum to 1 or 2.

I opened the page in mobile view and now I see 13 rows for that text section. I tried to change the number of row but it's not letting me. See attached screen shot. 

Thanks in advance for your help, if possible.

Ludmilla

Add to Website > Website Tools > Custom CSS

/* section height mobile */
@media screen and (max-width:767px) {
/* Out on the Farm */
[data-section-id="650cdb10457a6f232b4ada84"] .fluid-engine {
    grid-template-rows: repeat(2,minmax(24px, auto)) !important;
}
/* city life */
[data-section-id="650cdbdaead3997465a41359"] .fluid-engine {
    grid-template-rows: repeat(2,minmax(24px, auto)) !important;
}
}

Do similar for other sections, use this free tool to find data section id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

Again, thank you so much.

I was able to figure out the id section by looking at the Element Inspector in Safari. 

I couldn't believe my brain was able to find the id sections in that css jungle and correctly place it in the custom css 🙂

Have a great day and sincere THANKS!

Ludmilla

A new issue came up. Suddenly there is a big gap between the nav and the image display. It's perfectly fine in mobile viewing (of course) but on the desktop it's seems kind of large. And the images display rather small. Is there a way to close the gap and have the product image be a bit larger?Just a bit, not huge. It also seems that the product description text is too narrow. Like everything got squeeze to the left. Sorry to bug you! 

https://www.ludmillasart.com/art/p/meadow-surreal-painting

Thank you in advance.

Ludmilla

2 hours ago, Ludmilla said:

A new issue came up. Suddenly there is a big gap between the nav and the image display. It's perfectly fine in mobile viewing (of course) but on the desktop it's seems kind of large. And the images display rather small. Is there a way to close the gap and have the product image be a bit larger?Just a bit, not huge. It also seems that the product description text is too narrow. Like everything got squeeze to the left. Sorry to bug you! 

https://www.ludmillasart.com/art/p/meadow-surreal-painting

Thank you in advance.

Ludmilla

Replace these code

#page article section {
  max-width: 90%;
  margin-left: 10%;
}

With these code below

#page article > section {
  max-width: 90%;
  margin-left: 10%;
}

Thank you for your reply. It looks to me your suggested code is the same as the original. 

I will wait for @Tuanphan reply since he helped enormously and all his css tweaks worked. 

Thank you again.

Cheers, Ludmilla

56 minutes ago, Ludmilla said:

Thank you for your reply. It looks to me your suggested code is the same as the original. 

I will wait for @Tuanphan reply since he helped enormously and all his css tweaks worked. 

Thank you again.

Cheers, Ludmilla

I think you didn't understand my code difference. You should add a right arrow in the middle article and section. See the image