mrharris222

Thank you so much for the help @tuanphan The code worked perfectly!

Hi @tuanphan, sunflower-turquoise-ls9y.squarespace.com password: Cookies&Cream12$ I don't know how, but I messed around with some code and managed to get the nav links where I want them. Still don't know how to fix the footer social icons.

Hello! I need some help with two things. 1. I have a split navigation and I'm trying to adjust the padding of the nav links to be more inline with the middle of the logo. I tried adjusting the line height in the site style menu, but it didn't really give me the control I'm looking for. 2. I have my social icons in the footer. The default hover effect is to have the links at full opacity and when hovered over, the icon decreases in opacity. I would like to switch that and have all the icons at a slightly lower opacity and when hovered over the icon will go to full opacity. I hope that makes sense 🫤

Thank you @Vicks!

Hello, 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 SPLIT NAVIGATION */ @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;} .header-title{grid-column-start:2;} @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; .header-nav-list{justify-content:flex-start;} }}} //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"); } .header-actions{ width:@actionSize; flex: 0 1 @actionSize; max-width: @actionSize; } //hide left side nav when stacked .header-nav:first-child { display: none; } } /* STAR ICONS .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 😬

Perfect! Thank you so much!

Hello, I used some code from another post to have my navigation links change color on hover and it works great. I was wondering if there is a way I can customize it so that the color fades in on hover. This site is a good example of what I'm wanting: https://www.mattnaylor.com/ This is the code I'm currently using: .header-nav-item>a:hover { color: #8FB344 !important; } .header-nav-folder-item:hover a { color: #8FB344 !important; } /* desktop*/ .header-nav-item--active>a { color: #8FB344 !important; } /* folder */ .header-nav-folder-item--active a { color: #8FB344 !important; } Thanks!