Created A 4-Corner Button Navigation in Desktop View

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 //

Can you add 4 items to Navigation? Then we can use CSS position to achieve this

On 5/13/2023 at 9:07 PM, tuanphan said:

Can you add 4 items to Navigation? Then we can use CSS position to achieve this

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.

On 5/17/2023 at 1:26 AM, CarolinaP said:

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.

Add to Design > Custom CSS

div.header-nav-item:nth-child(1) {
    position: fixed;
    top: 3vw;
    left: 2vw;
    z-index: 9999;
}
div.header-nav-item:nth-child(2) {
    position: fixed;
    top: 3vw;
    right: 2vw;
    z-index: 9999;
}
div.header-nav-item:nth-child(3) {
    position: fixed;
    bottom: 3vw;
    left: 2vw;
    z-index: 9999;
}
div.header-nav-item:nth-child(4) {
    position: fixed;
    bottom: 3vw;
    right: 2vw;
    z-index: 9999;
}