DerrickSaenz

this isn't the IDEAL solution, I'd much rather use the variables themselves, but I also am not making a restaurant, so I was able to map the menu block colors to the five different palette colors. Thank you! Example: WHITE: var(--tweak-menu-block-nav-color) LIGHT ACCENT: var(--tweak-menu-block-title-color) ACCENT: var(--tweak-menu-block-item-title-color) DARK ACCENT: var(--tweak-menu-block-item-description-color) BLACK: var(--tweak-menu-block-item-price-color) in practice: .header-title-logo img, .header-mobile-logo img { filter: invert(1) drop-shadow(0px 0px var(--tweak-menu-block-item-title-color)) drop-shadow(0px 0px var(--tweak-menu-block-title-color)); transition: all 0.25s ease-in-out !important; }

Site password: colorcodehelp There are variables in for the colors that are changed throughout the code whenever you change the color palette. I want to use those so I can stop having to copy and paste the hex codes or the hsl numbers every time I want to add something within the color palette. Is there a way for me to start using those variables? For example I found this code: <style id="colorThemeStyles"> :root { --white-hsl: 41.54, 23.64%, 89.22%; --black-hsl: 60, 3.45%, 17.06%; --safeLightAccent-hsl: 176.9, 28.16%, 59.61%; --safeDarkAccent-hsl: 60, 3.45%, 17.06%; --safeInverseAccent-hsl: 60, 3.45%, 17.06%; --safeInverseLightAccent-hsl: 60, 3.45%, 17.06%; --safeInverseDarkAccent-hsl: 41.54, 23.64%, 89.22%; --accent-hsl: 176.9, 28.16%, 59.61%; --lightAccent-hsl: 44.27, 74.1%, 72.75%; --darkAccent-hsl: 211.46, 49.76%, 40.59%; } .white { --announcement-bar-background-color: hsla(var(--black-hsl), 1); --announcement-bar-text-color: hsla(var(--white-hsl), 1); --backgroundOverlayColor: hsla(var(--white-hsl), 1); ... and so on I see the colors there in that root tag, and I want to use it elsewhere, like in shadows or the effect on my site whenever you hover over a blog post link. I am still experimenting with color, so I want to figure out how to change all the effects at the same time rather than going into the color panel and then to the CSS code panel. Thank you!

Thank you, I've added that, and it definitely made the buttons more responsive. I'm still having an issue though with the top link being inaccessible. I'm illustrating it in the video attached, but it looks like the header cuts it off. Thank you for your help! 469549745_ScreenRecording2022-09-27at7_34_02AM.mov

I've been working on the code again and I think I've got it to a good place where I like how it looks, but there are still a few issues. Biggest issue is when I try to click the top link in the hamburger nav, it won't register. In this case, it's the home link. It doesn't register the hover or let me click that link. I think because it is "trapped behind" the header, but I have no idea how to fix that beside moving everything down, which is really aesthetically unpleasing. The second issue is the white bar that shows up to the right of everything. No idea how to get rid of it, and I can't right click it to inspect element. It looks like it's just blank space. It disappears when it needs to be scrolled through. Thank you again for looking at this. Current code pasted below. /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none !important; } /* Hide header button */ .header-actions { display: none !important; } /* show burger */ .header-burger { display: flex !important; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important; } } @media screen and (min-width:992px) { /*header padding for my site, not part of the hamburger .header-announcement-bar-wrapper{ padding-left: 16vw-6px !important; padding-right: 16vw-4px !important; }*/ .header-menu-nav{ overflow-y:hidden; margin-top:-204px !important; padding-top: 62px !important; } .container.header-menu-nav-item, .header-menu-nav-item a, .header-menu-actions.language-picker-content, .header-menu-actions.language-picker { font-size: 36px !important; margin-bottom: 0px !important; margin-top: 15px !important; min-width: unset !important; padding-left:0px; } .header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important; margin-left: 66vw !important; margin-right: 16vw-6px !important; margin-top: 40px !important; height: 400px !important; box-shadow: 0px 30px 100px rgba(12,112,232,.25) !important; transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out; } .header-menu-actions{ margin: 0px; } .header-display-mobile .header-title-text { width: 20vw !important; font-size: 1.5rem !important; padding-bottom:10px; } .header-menu-nav-folder-content { justify-content: flex-start !important; /* vertical alignment of navigation */ flex-grow:0; text-align: left !important; /* navigation text alignment */ } .header-menu-nav-folder:not(.header-menu-nav-folder--active) { display: none !important; /* hides non-active folder */ } .header-menu-actions-action { margin: 50px 10px; } .header-menu-cta { min-width: unset !important; height: 61px !important; } .header-menu-cta a { display: inline-block; text-align: center; box-sizing: border-box; margin: 0px; min-width: 210px; } }

I’ve removed it since it is a live site and I wanted to use something that works. But I found that the hamburger menu wouldn’t scale and behave how I wanted. I would love to still have it, if you can help!

Site URL: https://derricksaenz.com Hello! I am working on getting my website to look nice and clean, and one of the things on my mind is getting the header to be concise. So, I wanted to use a hamburger menu to collapse all my navigation and put it on the side of my website. However, the problem is that when I open it, there is some padding issue with the flex box or something, and it pushes all my links to the side. I would want everything left or center justified to the square I have set. Pasting my code below for reference. All found free while scouring the internet. /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none !important; } /* Hide header button */ .header-actions { display: none !important; } /* show burger */ .header-burger { display: flex !important; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important; } } @media screen and (min-width:992px) { .container.header-menu-nav-item, .header-menu-nav-item a, .header-menu-actions.language-picker-content, .header-menu-actions.language-picker { font-size: 28px !important; margin-top: 0px !important; margin-bottom: 5px !important; min-width: unset !important; } .header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important; margin-left: 66% !important; margin-right: 10% !important; margin-top: 1.75% !important; height: 33% !important; box-shadow: 0px 30px 100px rgba(12,112,232,.5) !important; transition: opacity .5s cubic-bezier(0.32, 0.08, 0.24, 1); -webkit-transition: opacity .5s cubic-bezier(0.32, 0.08, 0.24, 1); } .header-display-mobile .header-title-text { width: 20vw !important; font-size: 1.5rem !important; } .header-menu-nav-folder-content { justify-content: flex-start !important; /* vertical alignment of navigation */ text-align: center !important; /* navigation text alignment */ } .header-menu-nav-folder:not(.header-menu-nav-folder--active) { display: none !important; /* hides non-active folder */ } .header-menu-cta { width: 33vw !important; /* width of button */ } .header-menu-cta a { min-width: unset !important; } } The away that my code is set up, it doesn't allow for folders or the language switch option, which sucks since I'd appreciate those features. They just get pushed off the blue background. If that issue can be addressed too, that would be AWESOME, but I'm mainly holding out for the spacing since that more pertinent. I am somewhat trying to emulate clay.global's header, given that I have a clean aesthetic and a similarly simple logo going. I think that looks awesome and super intuitive despite it being hidden in a hamburger. I would appreciate any help or insight. Feel free to criticize the code too if you want 😅. Thank you!

Godsend, this guy. Thank you, that solved my issue!

Site URL: https://derricksaenz.com Hello, I am trying to fix the language selector screen of my mobile navigation window. It is all whited out, and I need it to look like the rest of the navigation. Which color setting changes that background specifically? I feel like I've tried them all! I have tested the other folders in the navigation, and they all work normally, so this isn't a folder issue, just the language selector. Hopefully someone will be able to help me with this. Thank you! Screen Recording 2022-09-08 at 11.22.15 PM.mov !

How would I be able to make this solution, or would a Squarespace developer be needed to make this change?

Site URL: https://derricksaenz.com Site: derricksaenz.com Hello, I want to get my website's account and login pop-ups to use different fonts, particularly the ones that I use on my website. I have an uploaded font to test on ('font-family: Staaliches' because it looks way different from the original font and I already have it uploaded), but ultimately I want to use Helvetica Neue, which is the font I am using for the rest of my website. I did an "inspect element" on multiple pages and found that the accounts <div> uses a class called .dE6c3WI8W and the login <div> uses a class called ._3zbTgu4v. This leads me to believe that if I went to Custom CSS, and I called those classes and put that the font family would be Staaliches, that would fix my issue. But it didn't. How would I go about changing the fonts of the account and login sections? Thank you! Image of my Custom CSS is attached.