katerynalubska

I noticed a pattern that navigation is hidden only on these pages

(from this site: https://www.squarestylist.com/blog/secondary-navigation) this: .header-actions .header-nav-item { padding-right:1.1vw !important; /**change as needed**/ } .header-nav-list { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:end !important; -ms-flex-pack:end !important; justify-content: center!important; .header-nav-item { padding-right:1.1vw !important; /**change as needed**/ } } .header-actions--right { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between !important; } .header-actions .header-nav-item { padding-right:1.5vw !important; //change as needed } .header-nav-list { display:flex; justify-content:flex-start !important; .header-nav-item { padding-right:1.5vw !important; //change as needed } } .header-actions--right { display:flex; justify-content:space-between; } .header-nav-folder-content { opacity: 0; pointer-events: none; position: absolute; top: 2.5em; margin-left: 0em; padding: .0em .0em; text-align: left; box-sizing: border-box; width: 185px; z-index: 10; padding-top: 0.5vw; } .header-nav-item--folder:hover .header-nav-folder-content, .header-nav-item--folder .header-nav-folder-content.focus-within { opacity: 1; pointer-events: auto; } .header-nav-item--folder:hover .header-nav-folder-content, .header-nav-item--folder .header-nav-folder-content.focus-within { opacity: 1; pointer-events: auto; } .header .header-nav-wrapper a { padding: 0; } .header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item { line-height:1.9em; }

Hello, everyone! I have the following problem: In the editor, the navigation is displayed correctly, but when viewing the site itself, the right side of the navigation is hidden. If you go to the internal page of the site, the navigation works properly. https://www.lafemmeralu.com/

yes! but I changed line-height on 1.9em and it turned out perfectly. you're a wizard!

https://lafemmeralucom.squarespace.com/ peachyblog

Hello everyone! Please help change the distance between items in the middle of a folder. My code: /* nav hover */ .header-nav-item>a:hover { color: #EF9362 !important; } .header-nav-folder-item:hover a { color: #EF9362 !important; } .header-nav-item>a:hover:after { content: ""; display: block; height: 1px; background-color: #EF9362; margin-top: 5px; } // Folder Color // .header-nav-folder-content { background: transparent !important; } // Folder Link Color // .header-nav-folder-item a { color: #22181C !important; } @media(min-width:767px) { .col.wm-sticky-column { position:sticky; top: 150px; } } .header-actions .header-nav-item { padding-right:1.1vw !important; /**change as needed**/ } .header-nav-list { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:end !important; -ms-flex-pack:end !important; justify-content:flex-end !important; .header-nav-item { padding-right:1.1vw !important; /**change as needed**/ } } .header-actions--right { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; } .header-actions .header-nav-item { padding-right:1.5vw !important; //change as needed } .header-nav-list { display:flex; justify-content:flex-start !important; .header-nav-item { padding-right:1.5vw !important; //change as needed } } .header-actions--right { display:flex; justify-content:space-between; } .header-nav-folder-content { opacity: 0; pointer-events: none; position: absolute; top: 2.5em; margin-left: 0em; padding: .0em .0em; text-align: left; box-sizing: border-box; width: 185px; z-index: 10; padding-top: 0.5vw; } .header-nav-item--folder:hover .header-nav-folder-content, .header-nav-item--folder .header-nav-folder-content.focus-within { opacity: 1; pointer-events: auto; } .header-nav-item--folder:hover .header-nav-folder-content, .header-nav-item--folder .header-nav-folder-content.focus-within { opacity: 1; pointer-events: auto; }

add to code: .newsletter-block .newsletter-form-button-wrapper { margin-top:0px; margin-bottom:-14px; }

Hello, everyone! Here's the problem: on the left is one size of the content folder, on the right is another. When I change the size of the box, it changes only on the right. https://lafemmeralucom.squarespace.com/ peachyblog Heeeepl 😭 My code: /* nav hover */ .header-nav-item>a:hover { color: #EF9362 !important; } .header-nav-folder-item:hover a { color: #EF9362 !important; } .header-nav-item>a:hover:after { content: ""; display: block; height: 1px; background-color: #EF9362; margin-top: 5px; } // Folder Color // .header-nav-folder-content { background: #F9F2ED !important; } // Folder Link Color // .header-nav-folder-item a { color: #22181C !important; } @media(min-width:767px) { .col.wm-sticky-column { position:sticky; top: 150px; } } .header-actions .header-nav-item { padding-right:1.1vw !important; /**change as needed**/ } .header-nav-list { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:end !important; -ms-flex-pack:end !important; justify-content:flex-end !important; .header-nav-item { padding-right:1.1vw !important; /**change as needed**/ } } .header-actions--right { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; } .header-actions .header-nav-item { padding-right:1.5vw !important;//change as needed } .header-nav-list { display:flex; justify-content:flex-start !important; .header-nav-item { padding-right:1.5vw !important; //change as needed } } .header-actions--right { display:flex; justify-content:space-between; } .header-nav-folder-content { opacity: 0; pointer-events: none; position: absolute; top: auto; margin-left: 0em; padding: .0em .0em; text-align: left; width: 100px; /* set the width to 185 pixels */ z-index: 10; } .header-nav-item--folder:hover .header-nav-folder-content, .header-nav-item--folder .header-nav-folder-content.focus-within { opacity: 1; pointer-events: auto; }

But now it looks like this in the desktop:

peachyblog https://lafemmeralucom.squarespace.com/ When I checked the site, I also saw that the right side of the navigation is hidden, can you help me with this as well?

Yes, but it hasn't been published yet. This is the standard form view, without any additional code https://lafemmeralucom.squarespace.com/config/pages/63ea6a6645f8c735ed823100

Hello, everyone! I need to change the distance between the input and the button to make it look more compact for a responsive design. In the desktop version, these elements are arranged in one row. Thank you!

Hello everyone and have a nice day 🙂 I need help with a newsletter form. First screenshot: this is how I need it to look like. The second and third screens are what I have now (with a hover effect). I need to remove this hover effect and replace it with an arrow, and also move the text in the inbox to the left edge. The site with the example form: https://cupofjo.com/ The code I took from the site: https://www.detraform.com/blog/free-squarespace-plugin-minimal-newsletter-block My code: /* Detraform's Minimal Newsletter Block*/ .newsletter-block { padding-top: 50!important; .newsletter-form-wrapper { background-color: transparent; padding: 0 !important; .newsletter-form-body { flex-direction: row; -webkit-box-align: left; -ms-flex-align: left; -ms-grid-row-align: left; align-items: ; display: flex; padding-bottom: 0; border-bottom: 1px solid; border-color: #FDF7EC; .newsletter-form-fields-wrapper { width: ~"calc(75% - 8px)"; margin: 0px; .newsletter-form-field-wrapper { display: block; width: 100%; padding: 0px; } input { font-family: 'Arial'; letter-spacing: 0; font-size: 14px; line-height: 1.4em; padding: 15px 20px; background-color: transparent; @media screen and (max-width: 640px) { padding: 15px 15px; } @media screen and (max-width: 420px) { padding: 17px 0 17px 12px; } display: block; border: none; &::placeholder{ font-family: 'Arial'; font-size: 14px; line-height: 1.4em; letter-spacing: 0; color: #FDF7EC !important; } } @media screen and (max-width: 1350px) { width: ~"calc(70% - 8px)"; } @media screen and (max-width: 1200px) { width: ~"calc(64%)"; } @media screen and (max-width: 1024px) { width: ~"calc(75%)"; } } .newsletter-form-button-wrapper { width: 24%; height: 100%; margin: 0px; padding: 0; margin-top: 0px; vertical-align: middle; button { background-color: transparent !important; border: none !important; vertical-align: top; box-shadow: none !important; padding: 17px; width: 100%; font-family: 'Arial'; font-size: 0.9em; line-height: 1.5em; letter-spacing: 0; text-align: right !important; span { text-align: right !important; text-transform: none; color: #FDF7EC !important; font-weight: 400; &:hover { opacity: .7; } } @media screen and (max-width: 1024px) { text-align: right; padding-left: 0; padding-right: 10px; } @media screen and (max-width: 640px) { text-align: right; padding-left: 0; padding-right: 0; } } @media screen and (max-width: 1350px) { text-align: right; padding: 0 30px; width: 32%; .newsletter-form-button { padding-right: 0; } } @media screen and (max-width: 1024px) { text-align: right; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 15px; } @media screen and (max-width: 640px) { padding-right: 12px; } } @media screen and (max-width: 1200px) { text-align: right; width: 100%; } } .newsletter-form-footnote { text-align: left; letter-spacing: .0em; } } .newsletter-form-footnote { margin-top: 16px; p { font-family: 'Arial' !important; line-height: 1.25em; opacity: 1; strong { font-weight: 400; color: #FDF7EC !important; } } } }

Thank you, Ziggy. These links helped me a lot!)

Hello, everyone. How can I make the navigation layout like in the 2nd screenshot? On the first screenshot is my website, I need to divide the page links into two parts so that the logo is in the middle. Website example: https://cupofjo.com/