Jump to content

Icons between Navigation links and resizing logo for large screens

Go to solution Solved by Vicks,

Recommended Posts


I have two questions I need help with.

Question #1
I have a split navigation on the portfolio site I'm working on and I put star icons between each navigation link. They aren't spaced out correctly, and I would like to have the stars reflected symmetrically on both sides. It's hard to explain but hopefully the attached image will show what I mean. I assume I would need to have separate codes for the left and right sides, but I'm not sure exactly where to place them or how to write them.

Here are the CSS codes I used for the split nav and the icons


@splitAfterItem: 2;
@actionSize: 50px; 
@logoSpacing: 1.5vw;

//Width at which nav will stack
@media screen and (min-width:116px) {
//Dynamic Nav font size
#header .header-nav-item {
  font-size: clamp(12px,calc(~".6vw + 5px"),15px);

//Split Structure
#header .header-layout-branding-center-nav-center .header-display-desktop .header-title-nav-wrapper {
  display: grid;
grid-template-columns:1fr auto 1fr;
  .header-nav,.header-title {
    grid-row-start: 1;
  .header-nav { margin-top: 0; }
  .header-nav-item a {
    opacity: 0;
    transform: none!important;
    transition: opacity .3s linear;
  &.has-nav .header-nav-item a{opacity:1!important;}
@splitOne: @splitAfterItem + 1;
.header-nav:first-child .header-nav-list > div:nth-child(n +@{splitOne}) {display: none;}
.header-nav:not(:first-child) .header-nav-list > div:nth-child(-n +@{splitAfterItem}){display:none;}
//Left side nav
.header-nav:first-child {
  display: block;
  text-align: right;
  margin-right: @logoSpacing;
  .header-nav-list {
    justify-content: flex-end;
//Right side nav
.header-nav:not(:first-child) {
  text-align: left;
  margin-left: @logoSpacing;
//Give nav more width
#header .header-layout-branding-center-nav-center .header-display-desktop {
  .header-title-nav-wrapper {
    flex: 0 0 calc(~"100% - @{actionSize} * 2");
  flex: 0 1 @actionSize;
  max-width: @actionSize;
  //hide left side nav when stacked
.header-nav:first-child {
  display: none;



.header-nav-item a:after {
  content: " ✦ ";
  margin-left: 10px;
  color: #C2BE58;


Question #2
How do I make the logo resize for a large monitor screen? I've been working on my 13" screen laptop at home, but when I look at my site on my 27" screen at work the logo stays the same size and looks too small. I tried to use the clamp code, but I don't understand how to write it. 


Sorry for such a long post 😬



Screen Shot 2023-04-19 at 10.45.42 PM.png

Edited by mrharris222
reattached image
Link to comment
  • Solution

for nav icons, you can just change the css selector 

.header-nav-item a:after => .header-nav-item a:before

and remove or adjust the margin-left:10px  accordingly to even out the spacing between.

However, changing the class selector will also move the icons on the left side of menu also. I can provide better suggestion if you share the website, I can take a look at logo sizing issue too.

Edited by Vicks
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.