CarolinaP

Hi there, thanks for the reply and help! I just added the 4 items to the nav. Would love to hear your solution from here.

Hello, I have been trying to move my nav links into the four corners of my site (see example: https://www.takeagander.com/) as well as style them all in the template button style (not the nav links style), but can't seem to figure this out. I've tried the very clunky and broken code below, but it's not working quite yet. You can see my site here: https://okra-burgundy-p9s8.squarespace.com/. The password is LeroyJenkins. Currently, I've created two buttons in the footer for the bottom left and right nav items and have tried (somewhat sloppily) to fix that section of the footer to the bottom of the screen. This is somewhat working on the homepage (though it's getting cut off at certain frame sizes) but it doesn't work on the other pages. This is also forcing me to try and then add these two items back into the mobile nav, which I haven't figured out how to do. Note: I would prefer to keep the native mobile menu. I'm thinking it might be easier to link these pages back into the main nav and find another solution? For the top left and right items, I'm using the built in navigation. The right item 'New Releases' is perfect (it's the regular button style that comes with this template) and I've managed to get the left item 'Artists' into a button shape. I can't seem to remove the underline animation on rollover though and then add in the regular button animation. I would like the buttons to stay fixed in place the entire time. Also, I'm using this template: https://www.squarespace.com/templates/amal-fluid-demo. Overall, I think I'm making this more complex than it needs to be since I have zero clue what I'm doing. I would appreciate whatever help anyone might have! Thanks! Current Code: /* Custom Fixed Footer Section */ #footer-sections .page-section:last-of-type { position: fixed!important; width: 100%!important; bottom: 0!important; z-index: 99!imporant; } // END Custom Fixed Footer Section // /* Hide Fixed Footer Section on Mobile */ @media only screen and (max-width: 768px) { #footer-sections .page-section:last-of-type { display: none !important; } } // END Hide Fixed Footer Secton on Mobile // /* First Header Link into Button */ @link-for-first-button: 1; @2-nav-buttons-background: rgba(0,0,0,0.0); @2-nav-buttons-link-color: #fff; @2-nav-buttons-font-size: 20px; @2-nav-buttons-padding: 10px 5px; @2-nav-buttons-width: 150px; @2-nav-buttons-border: 1px solid #fff; @2-nav-buttons-radius: 100%; /* ---- Do Not Edit Below ---- */ .header-nav-item:nth-child(@link-for-first-button) a { font-size: @2-nav-buttons-font-size; background: @2-nav-buttons-background !important; color: @2-nav-buttons-link-color !important; width: @2-nav-buttons-width !important; border: @2-nav-buttons-border !important; border-radius: @2-nav-buttons-radius !important; text-align: center !important; } .header-nav-item a { padding: @2-nav-buttons-padding !important; } // END First Header Link into Button //

I am also looking for this solution, though I only want the 4 corner buttons on desktop (styled in the button style, not the regular nav link style) and will keep mobile as is. I've tried a sort of broken work around right now, but it's pretty busted. You can see the site here: https://okra-burgundy-p9s8.squarespace.com/ with the password LeroyJenkins. Thanks!

Hello, I've used the code below on various client sites to customize the form block, and it's worked perfectly until recently. Now, I've gone back to check old sites where the code was working (I think until just a few weeks ago), and it's no longer targeting correctly. I've tried variations of the code (adding !important to all elements, trying different classes and ids), and nothing seems to be working. I don't think this is a 7.1 issue as the code seemed just fine until recently. Would really appreciate some help on this. I'm no expert when it comes to CSS and coding and just rely on my tiny bit of school training and what I can find online. .form-wrapper .field-list .field .field-element { background-color: #fff; border-style: solid; border-color: #000000; border-width: 2px; } For reference, I also used the code successfully on this site. Thanks! Carolina