DPruitt

Since you're on version 7, maybe Wells?

Instead of hiding the entire header with this code:

#collection-61cf21724254e77985673323 #header {
    display: none;
}

Use this instead:

#collection-61cf21724254e77985673323
#topNav
{display: none;}

If you don't remove the old code, you would need to also add:

#collection-61cf21724254e77985673323 #header {
    display: block;
}

I could probably work with you one-on-one.

Feel free to invite me into your site: derek@derekpruitt.design

Hey Maeve!
You can use CSS to adjust the accordion visually... Much like we would for the carousel.

Either approach would work; both will require CSS to make it visually appealing.

With the accordion, you can first create a text block for the first part of the visible text, then drop in the accordion block below it with "Read More" as a title, with the description containing the remaining text...

If you're trying to do it within the carousel, you would need HTML within the description, Javascript for the "read more" button along with CSS to style it visually.  I've written this for a few clients, however, you do have to add HTML to the content description which some people don't like doing.  For example <h4>Read More...</h4> would be added to the description field.

You can inject this into the pages index header or main header injection area:

https://kwerling.squarespace.com/config/website/pages/website-tools/code-injection

The first section is set to "large" more than likely.

Try this instead which only fixed this specific page/item:

@media screen and (max-width: 768px) {
#item-64b52c9d20a12e01581b3309
.page-section:first-child
{min-height: 30vh!important;}
}

You should be able to do this under "Fonts".

You can also code it with custom CSS like this:

.newsletter-form .newsletter-form-header-title
{font-size: 25px !important;}

Try this:

Blog Title:

.blog-title
{    font-family: Helvetica Neue !important;
    font-size: 2rem !important;
  	text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: 0rem !important;
  margin-bottom: 0.8em;
  margin-top: 0.8em !important;
	padding-bottom: 0.5rem !important;
	padding-top: 0.5rem !important;}

Blog Excerpt:

.blog-excerpt p
{font-size: 1rem !important;}

.blog-excerpt
{padding-bottom: 0.8rem !important;}

Read More Link:

.blog-more-link
{	font-family: 'aktiv-grotesk-extended' !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	font-style: normal !important;
  text-transform: uppercase !important;}

Hey!

For the testimonial section, you can have "read more" by using an accordion block for the drop down function of read more...

Do you have specifics that you'd like to see?

Try this which displays the original desktop navigation:

.header-display-desktop {
    display: flex !important;
}

.header-display-mobile,.header-burger {
    display: none !important;
}

.header .header-title-nav-wrapper .header-title {
    flex:  0 100% !important;
}

Need a link?

You can, but it would require javascript...

If you can run javascript you can use this probably:

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<script> 
$('#grid')
  .before('<h3 class="kwportfolio">My portfolio site is under construction! In the meantime, please check out some of my past work below.<br>Need recent work samples now?<a href=mailto:karenlwerling@gmail.com>Please reach out to me directly.</a></h3>')

</script>

You could do this:

.header-menu-nav-folder-content
{justify-content: initial !important;}

.header-menu-nav-folder.header-menu-nav-folder--active {
    flex-direction: column-reverse !important;
}

Sadly, it does move the Social Icons above the navigation.

You could do this approach instead to solve that issue:

.header--menu-open .header-menu .header-menu-cta
{order: 0;}

.header-menu-nav-folder-content
{order: 5 !important;}

.header--menu-open .header-menu .header-menu-actions {
    order: 6 !important;}

Perfect!

Looks like you also need to remove some CSS from your header injection as it's rendering on the page.

Try this instead:

.ProductList-filter-list-item-link,.ProductList-title,.sqs-announcement-bar-text p
{font-family:'TypeType+-+TT+Commons+DemiBold.ttf' !important;}

First remove Squarespaces' border, then try this instead:

.header-display-desktop
{border-bottom: 1px solid rgba(255,255,255,.5);}

.header.shrink
.header-display-desktop
{border-bottom: 0px solid #ffffff;}

Do you have a link?

Try this:

@media screen and (max-width: 540px) {
#sections
.page-section:first-child
{min-height: 20px!important;}
}

If you need to also reduce the padding to the section:

@media screen and (max-width: 540px) {
#sections
.page-section:first-child
.content-wrapper
{padding:0px !important}
}

please share link...

You should be able to click "edit section" and choose "Lightbox" to have the images open when clicked.

Feel free to share a link...

1. You can add the form to the product so that when they click Join Now, they get the form in a Lightbox:
https://support.squarespace.com/hc/en-us/articles/205811218-Creating-a-custom-product-form

2. You can add the questions to the checkout page depending if you have other memberships or products:
https://support.squarespace.com/hc/en-us/articles/206540907-Creating-a-custom-checkout-form

If you create the last section on the site and provide the link I can write you css for it...