Home Page: Portfolio Layout

BangaBuilds · October 15

Site URL: https://tetra-wisteria-snzf.squarespace.com/

Password: BangaBuilds

Hi all,

Hoping for help regarding the following situation(s):

My home-page is the Portfolio Navigation. My options are currently:

BUILDS / SERVICES

INVEST / ABOUT

I was hoping to somehow get it to: BUILDS | SERVICES | INVEST

This "|" delineator is not an option SquareSpace provides. I also don't know how to Bold the text. Lastly, I'm not sure how to remove my 4th selection "About", as I've just manually inserted it into my footer instead.

Any help regarding how to achieve this desired outcome would be much appreciated!

Edited October 16 by BangaBuilds
Incorrect website link

CassAggett · October 16

@BangaBuilds I would suggest rebuilding the About page as a separate, non-portfolio page if you just want to link to it separately. That way when people visit the page from the footer, it won't link to the previous portfolio item (currently Invest).

To change the forward slash to a pipe, try this code:

.portfolio-hover[data-layout="inline"][data-delimiter="forward-slash"] .portfolio-hover-item:not(:last-child) .portfolio-hover-item-title::after, .portfolio-hover[data-layout="inline"][data-delimiter="forward-slash"][data-mode="hover-cover"] li:not(:last-child) .portfolio-hover-item .portfolio-hover-item-title::after {
  content: "|" !important;
  font-size: .85em;
}

The font size is the default, but you could adjust if needed.

FYI when sharing your website link, don't include the /config on the end as then it thinks we're trying to login as you rather than view the website 😊

BangaBuilds · October 16

@CassAggett That worked perfectly, thank you!

Any recommendation on how I could get all (now 3) of my projects on the same line? Currently it's:

BUILDS | SERVICES |

INVEST

But I'd rather it be:

BUILDS | SERVICES | INVEST

And if you know how to make that happen, then some additional information on how to align it in the y-axis would also be greatly appreciated!

Thank you for your help with all my troubles, and thanks for the tip on the /config !

BangaBuilds · October 16

Lastly @CassAggett is there a way to make these changes only on desktop? Delimiter's don't show up on mobile, and I really like that view as it just stacks all the project options without delimiters. However I am hoping we could still do everything I described above, just strictly for desktop.

CassAggett · October 17

@BangaBuilds It seems like it's wrapping lines due to the size of the text, rather than any unnecessary padding or margins.

You could try this to reduce the font size on desktop - 3.5rem is on one line on my 14-in laptop:

@media screen and (min-width: 768px), screen and (max-width: calc(1943px)) and (orientation: landscape) {
  .portfolio-hover[data-variant-hover-follow] .portfolio-hover-item-title {
    font-size: 3.5rem;
  }
}

Home Page: Portfolio Layout

Recommended Posts

BangaBuilds

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

CassAggett

Posted Images

CassAggett

BangaBuilds

BangaBuilds

CassAggett

Create an account or sign in to comment

CassAggett

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources