mindofalexander

Hey everyone, I've run into an issue where the borders on specific buttons ("Why You Should Hire Me", "Explore My Resume", and "Let's Get Started") disappear on my live Squarespace site, yet they appear as intended in the editor. Is there a known solution to ensure button borders display consistently on the live site? I have screenshots for comparison if needed. Appreciate any advice! Alexander ----------------------------------------------- URL: https://www.mindofalexander.com/

Bump

Thank you for your solution @Web_Solutions Have a good one!

Hello everyone, Issue: On the mobile version of my site, the "Why you should hire me" button overlaps with my logo when accessing the hamburger menu. Goal: I want to hide this button ONLY on mobile without affecting its display on desktop. Questions: 1. How can I hide the button only in the mobile view? 2. Any Squarespace-specific solutions or CSS tweaks for this? Website: https://www.mindofalexander.com/ Thanks for any help!

Hello everyone, Issue: On my "Let's Work Together" page, the "Message" box causes nearby text to move when expanded in the corner. Also, on certain screens, hovering over "Let's Get Started" makes adjacent text jitter up and down. Goal: I want all elements to remain static regardless of user interactions. Questions: 1. How can I stop the "Message" text from shifting? 2. Any CSS or Squarespace settings causing these issues? 3. Has anyone faced and resolved similar problems? Website: https://www.mindofalexander.com/lets-work-together Example Video: Thanks for the help!

@jaeveedee This was extremely helpful! Thank you for your hard work and clear explanation. While your guidance was valuable, I was also able to find a solution myself with the script. Regardless, I truly appreciate the time you took to provide a solution and a fresh perspective. Thanks again for the assistance. 🙂

Hello @jaeveedee, Thank you for taking the time to respond. I have to admit, I'm quite lost with the explanation and instructions you've given. Can we perhaps simplify this or break it down a bit more? I appreciate your patience and I apologize for feeling a bit confused by your response.

Hello everyone, The Issue: I've been working on customizing the pagination titles on my Squarespace site, and after adjusting various aspects, I've encountered two main challenges. Firstly, I need to adjust the wording of specific pagination titles. Secondly, I noticed some pages lack left/right buttons, and there seems to be inconsistent alignment on certain pages. The Context: To give a clear picture, I'd like to change the following pagination titles: - From "Full-Scale Branding for NC Expert Organizing Company" to "Simple Haven" - From "Constructing a Distinctive Barbering Brand Hidden in Plain Sight" to "Odd Fellows Barber Co." - From "My Role at the Nation-leading Restaurant Supply Company" to "TriMark" - From "Crafting an Online Presence for Pro-Gamer & Livestreamer" to "JLove TV" Additionally, some pages, even though they are at the "ends", are missing pagination buttons either on the left or right. I'd like to ensure that all pages have these buttons. Furthermore, I've observed that certain pagination titles, like the one for "TriMark", appear to be offset to the right more than others. Specific Problems: - Pagination titles need text adjustments. - Missing left/right pagination buttons on certain pages. - Inconsistent alignment of pagination titles across different pages. Questions: 1. How can I adjust the wording of the pagination titles using CSS or Squarespace settings? 2. Is there a way to ensure that all pages have consistent left/right pagination buttons, regardless of their position in the sequence? 3. Can anyone provide insight on why certain titles might be misaligned or recommend a method to ensure consistent alignment across all pages? My Website: https://www.mindofalexander.com/ Any assistance or guidance would be greatly appreciated!

@tuanphan Certainly, the "About Me" page should feature continuous text that dynamically adapts to screen size. The footer details—location, academic background, and contact—should remain stacked. Example: Based in: Boston, Massachusetts Academic Background: BA - Curry College Let’s Connect: emailme@mindofalexander.com For the "Let's Work Together" page, the layout should maintain its integrity across all screen sizes, resizing text as needed for optimal aesthetics.

Bump @tuanphan

I do still need help and your assistance would be greatly appreciated! 🙂 Problems: - On my website, text formatting varies on different devices and screen sizes. - The "Let's Work Together" page loses its shape when the screen size changes. - The "About Me" page has line breaks on smaller screens, making it look messy. Need Solutions For: - Keep text formatting consistent across all devices and screen sizes. - Ensure that the "Let's Work Together" text maintains its shape but adjusts in size for different screens. - Prevent line breaks in the "About Me" text on mobile and other screens, keeping it neat and organized. Please see images above in this thread for examples of error on my site. Website: https://mindofalexander.squarespace.com/ Thank you so much for your help @tuanphan

Bump

@tuanphan Please see attached.

@tuanphan Hey there! I was able to find a solution. Thanks!

Bump

Bump

Hello everyone, I'm currently in the process of enhancing the navigation experience on my Squarespace website. My website's navigation already has several dynamic animations, and now I would like to introduce an additional feature. My Website: https://mindofalexander.squarespace.com The Problem: I have a specific navigation item (`nav-item id="yui_3_17_2_1_1694084768474_515"`) or the "My Work" button that I want to behave differently based on certain pages in the website. When the page is active but NOT one of these 4 specific pages, hovering over the navigation item should display the default arrow cursor, and clicking should do nothing (like it currently does right now). However, when the user is inside one of these four pages: - `#item-64dd2003f0a4be3998c1f3d1` https://mindofalexander.squarespace.com/my-work/jlove-tv - `#item-64f2346506390a2bf9baab2d` https://mindofalexander.squarespace.com/my-work/trimark - `#item-64f344a9c9f6115989c219a6` https://mindofalexander.squarespace.com/my-work/odd-fellows-barber-co - `#item-64f46cbb72389701db63100e` https://mindofalexander.squarespace.com/my-work/simple-haven I want the cursor to show a finger pointer and clicking on it should take the user to the specific page. Also, the style should remain grey when hovered. Thanks For the Help: I would really appreciate any guidance or sample code to solve this issue. Thank you for your time and expertise! What I've Done So Far: Here's a snippet of the CSS and JavaScript I have for handling navigation styles and animations: CSS: /* Header nav buttons */ .header-nav-item--active a { background-image: none !important; color: blue !important; } .header-nav-item--active a::before { width: 100%; height: 4px; /* Making it thicker */ background-color: blue; /* or any color that indicates it's the active page */ visibility: visible; /* <--- Add this line */ } /* THIS HIDES THE ACTIVE UNDERLINE */ .hide-active-underline::before { visibility: hidden; /* <--- Add this line */ } /* Position and styles */ .header-nav-item a { position: relative; overflow: hidden; transition: color 0.3s ease-in-out; } /* Header nav colors and animations */ .header-nav-item a::before { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: blue; transition: all 0.3s ease-in-out; } .header-nav-item a:hover { color: blue; } .header-nav-item a.my-custom-exit::before { left: 100%; background-color: black; } .header-nav-item a.my-custom-enter::before { width: 100%; } .header-nav-item--active a::before { width: 100%; height: 2px; background-color: blue; visibility: visible; } .header-nav-item--active a.hide-active-underline::before { left: 50%; right: 50%; width: 0%; } .header-nav-item--active a.hide-active-underline::before { left: 50%; right: 50%; width: 0%; background-color: blue; } .header-nav-item--active a.hover-active { color: #C0C0C0 !important; } .header-nav-item--active.quick-transition a, .header-nav-item--active.quick-transition a::before { transition-duration: 0.2s !important; transition-timing-function: ease-in-out !important; } /* Sets cursor to a default arrow for active navigation items */ .header-nav-item--active a { cursor: default; /* Add this line */ background-image: none !important; color: blue !important; } /* Sets the cursor to a hand (pointer) for non-active navigation items */ .header-nav-item a { cursor: pointer; /* Add this line */ position: relative; overflow: hidden; transition: color 0.3s ease-in-out; } /* Makes the My Work item clickable and shows pointer cursor when on a sub-page */ .header-nav-item a.sub-page-active { cursor: pointer !important; } Javascript: <script> // Dynamic Underline Animation on Navigation Buttons document.addEventListener('DOMContentLoaded', function () { // Select all nav items const navItems = document.querySelectorAll('.header-nav-item a'); navItems.forEach(function (navItem) { // Check if the nav item is active const isNavItemActive = navItem.parentElement.classList.contains('header-nav-item--active'); // Set the cursor type based on the active state navItem.style.cursor = isNavItemActive ? 'default' : 'pointer'; // Add click event listener to prevent clicks on active items navItem.addEventListener('click', function (event) { if (isNavItemActive) { // Prevent the click event if this is the active item event.preventDefault(); } }); // Mouse enter event navItem.addEventListener('mouseenter', function () { // Add classes for enter animation this.classList.add('my-custom-enter'); this.classList.remove('my-custom-exit'); if (isNavItemActive) { // Hide the active underline only for the active item this.classList.add('hide-active-underline'); this.classList.add('hover-active'); } }); // Mouse leave event navItem.addEventListener('mouseleave', function () { // Remove hover-active and enter classes this.classList.remove('my-custom-enter', 'hover-active'); if (isNavItemActive) { // For the active item, grow the underline back from the center this.parentElement.classList.add('quick-transition'); // Add quick transition class this.classList.remove('hide-active-underline'); this.classList.add('hide-active-underline'); } else { this.classList.add('my-custom-exit'); } // Remove classes after the transition ends setTimeout(() => { this.classList.remove('my-custom-exit', 'hide-active-underline'); this.style.transition = 'none'; const beforeEl = window.getComputedStyle(this, ':before'); this.style.setProperty('--before-left', beforeEl.left); this.style.transition = ''; if (isNavItemActive) { // Remove quick transition class for the active item this.parentElement.classList.remove('quick-transition'); } }, isNavItemActive ? 200 : 300); // Timing based on whether the item is active }); }); }); </script>

@tuanphan Thank you for the update; it's great to see that the dilemma between the code blocks and image blocks has been resolved. However, I've noticed that there's still an issue when a code block is adjacent to another code block—there's some extra spacing there that doesn't seem intended. Could you please take a look at this?

@tuanphan Thank you so much for your help! After reading your question and looking into it a bit more, I realized it was a bit confusing—turns out the homepage header was already transparent. 😄 Appreciate your patience and assistance!

@GRIT_Digital I'm in! I'll give this a go while I've got some time. 🙂

I wonder if @tuanphan could weigh in on this. Tuanphan, have you got any suggestions on how to make the header transparent but only for the homepage?

@GRIT_Digital Nope, still can't get in, unfortunately.

@GRIT_Digital I'm in, thanks for the access! However, it looks like I'll need a bit more permission to see the CSS tab and try to fix the issue.

Sure, let's give it a try. Could you send me some screenshots of where the header's showing up and you don't want it to? It'll help me get a better idea of what's going on. You can send the access request to my email: emailme@mindofalexander.com. No promises, but I'll do my best to figure it out!