CassAggett

@TRiL this heading is currently bolded, try remove that first. If it's still too thick, it's likely you've got the font weight for headings set higher in Site Styles. You can check that by going into Site Styles > Fonts > Headings and adjusting the weight. Unless you override the font weight in CSS when you upload a font, it will take this part of the style from here.

@domr You sure can - check this tutorial out:

https://www.will-myers.com/articles/perfect-anchor-links-in-squarespace

Follow this exactly for single page links - if you have more than one page of your site though and want to use anchor links in the nav bar, you'll also need to include the page URL slug, so instead of #anchor you'd use /home/#anchor for example

This link works for me:

Is it possible you don't have a default email client set up in your browser? Mine opened directly in a new Gmail tab.

Following from above, you also might want to check your your colour settings in Section Styles - do you have a section in there that's got a white background with this pale coloured text? If so it could be pulling the previews from that.

@Javdesign here's a couple:

https://www.beatrizcaraballo.com/blog/looping-rotating-words-heading-squarespace

https://schwartz-edmisten.com/plugins/p/animated-rotating-text

@Goodmerch can you share a link to your site? The code you've used above includes a section that you'll need to update specific to your site - section[data-section-id="123"] needs to be replaced

@Zoe1213456 can you share a link to your site and which text you're trying to change on hover?

@willem-jan Hi Willem, you can follow the instructions here:

https://support.squarespace.com/hc/en-us/articles/205815838-Adding-a-site-title

If you test it on your mobile you'll likely find it looks 'normal'. Without looking into the code I'd assume it's because the overlay menu is set to cover the full height of the screen, but the Squarespace mobile editor view height is much taller than an actual phone screen so this will look stretched here

Hi @Virtualvisionaries, try this code:

@media only screen and (max-width: 747px) {
  .header .header-announcement-bar-wrapper {
    padding: 3vw 6vw 3vw 6vw !important;
  }
}

The padding values are are this order: 3vw (top), 6vw (right side), 3vw (bottom), 6vw (left side).

The default is 6vw on all sides, so the above code halves that on the top and bottom for screens smaller than 747 pixels wide.

6 hours ago, Fearless said:

Hi Melody,  Thanks for getting back.  Yes it's currently h2 on desktop to make it look okay on mobile.  What we like is to make it h1 on desktop and h2 on mobile.

You'll need to change the text back to H1 (that's better for SEO as the page heading anyway), then the code you're using will work and you can adjust to the size to what you want it to be on mobile.

@WBRenes The section on the Spirits page you're referring to is a list section, which takes on different colour settings within Site Styles. When you've got that page open, open Site Styles > Colors > Select the colour theme > then scroll to List Section - there will be an option to change the button colour for the list section buttons in there

Did you fix this? Looks all good on my end with no overflow.

You can also adjust this in the accordion paragraph settings:

I've set this example to 100% and the added min-width: 100% overrides the inexplicable max-width: 300px that's in the code.

5 hours ago, Janet-CA said:

@CassAggett the screenshot is from the source code that I found by using View > Developer > View Source in Chrome. I can't figure out where the text block is that you referenced. Can you please tell me more detail as I would LOVE to get rid of this? Broken link checkers are still showing the links that shouldn't be there.

What page of your website is this link on (i.e. where you inspected the source code)? Can you share a link?

From what it looks like in the screenshot, wherever this text is on your site, the old link is still attached to the period at the end of the sentence. So if you can find that, you should be able to highlight the period then remove the link from that, leaving the link still attached to the words - hopefully that makes sense!

@oliviapalacios Oh sorry, didn't realise it was only applied to the home page.

Depending on your header style, the black X might be coming from here:

It looks like it in the code, but it's also possible it's being affected by the custom nav text code.

If above settings don't fix it, try one of the codes in this blog post:

https://www.rebeccagracedesigns.com/blog/hamburger-button-colour

47 minutes ago, thebellesophie said:

Thank you so much for your response! I'll definitely report back. I am sorry if this is a  trivial question, but could you please recommend the font size I should use?

Anything you like! What you can do is open mobile view in the editor, then navigate to the Custom CSS panel and add the code in as is. In the editor preview, open the mobile menu, then adjust the size in the CSS panel so you can see what it looks like as you change it. You might like smaller like 1.2em, where something like 2em might be too large and still push the text onto two lines. Will just be a bit of trial and error 🙂

Looks like you've got code in there to remove the header, so it won't display the + icon on mobile.

You'll need to adjust the code to hide the header on desktop only first

@thebellesophie You can use this code to adjust the size of the menu links - adjust font size to what you need:

//MOBILE MENU HEADING SIZE//
.header-menu-nav-item a {
    font-size: 1.6em;
}

@AdamZ I've created a directory using blog posts and universal filter plugin before, but that's needs manually entry of each blog post.

Would something like this work?

@maya_m Can you please share where the archive block is on your site? I couldn't find it on the Work page.

@Camichel This is what I've used for product block variant drop down - it will apply to all select / dropdown options with this code as is:

select {
  border: 1px solid black !important;
  background-color: transparent !important;
}

@ChhandakP If you're referring to the space between the mobile menu links, you can try this code:

.header-menu-nav-item a {
  margin: 5vw 5vw;
}

The first 5vw (top and bottom link margin) is what I've changed from the current 3vw.

The second 5vw is the default setting for left and right margin.

@cpcn Have you followed the guide linked under 'Transfer Domain' in your second screenshot? You'll need to do this to remove it from the 'holding' website that it's currently linked to. Once you've done that, you should be able to link it to your actual website.

@BexBex you sure can, check out this blog post:

https://www.beatrizcaraballo.com/blog/categories-shop-squarespace#anchor-full-code