mrharris222 Posted April 20, 2023 Share Posted April 20, 2023 (edited) 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 😬 Edited April 20, 2023 by mrharris222 reattached image Link to comment
Solution Vicks Posted April 20, 2023 Solution Share Posted April 20, 2023 (edited) 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 April 20, 2023 by Vicks tuanphan 1 Link to comment
mrharris222 Posted April 24, 2023 Author Share Posted April 24, 2023 Thank you @Vicks! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment