kaydotjpg Posted September 6, 2023 Share Posted September 6, 2023 Website: https://octagon-bugle-k97s.squarespace.com/ Password: 12345 Hi! I added the first code below, in red, to prevent the navigation links from stacking while centered. While the links aren't stacking anymore (yay!), they aren't center. I tried adding in a code below, in blue, to get them centered but it didn't seem to help. Any tips? //center nav without stacking// .header-nav-list { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } //center nav links// .header-layout-branding-center-nav-center .header-title-nav-wrapper { width: 100% !important; flex: 0 0 100% !important; } div.header-actions-action a.cart-style-icon { position: relative; right: 3vw; } Link to comment
Solution kaydotjpg Posted September 6, 2023 Author Solution Share Posted September 6, 2023 I figured it out by using this code: //center and unstack nav links// @logoActionSize: 4.8%; <--- adjust this .header-layout-nav-center .header-display-desktop { .header-title-nav-wrapper { flex: 1 0 calc(~"100% - @{logoActionSize}"); } .header-actions { width: @logoActionSize; } .header-title { width: @logoActionSize; flex: 1 1 @logoActionSize; } .header-nav { width: calc(~"100% - @{logoActionSize} * 2"); flex: 1 1 calc(~"100% - @{logoActionSize} * 2"); } } 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