mrharris222
-
Posts
9 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by mrharris222
-
-
On 4/28/2023 at 9:56 PM, tuanphan said:
Add this to Design > Custom CSS
/* Footer Social Icons */ footer.sections .sqs-svg-icon--wrapper { opacity: 0.8 !important; } footer.sections .sqs-svg-icon--wrapper:hover { opacity: 1 !important; }
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 🫤
-
-
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 😬
-
9 hours ago, tuanphan said:
Change your code to this
header#header a { transition: all 0.3s ease; } .header-nav-item>a:hover { color: #8FB344 !important; transition: all 0.3s ease; } .header-nav-folder-item:hover a { color: #8FB344 !important; transition: all 0.3s ease; } /* desktop*/ .header-nav-item--active>a { color: #8FB344 !important; } /* folder */ .header-nav-folder-item--active a { color: #8FB344 !important; }
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!
How to prevent header from animating on page change
in Customize with code
Posted
I've been wanting to fix this too. I was also wondering if there is a way to prevent the logo from animating every time I click to a new page.