Paola_H

Thank you this worked perfectly!

Apologies for the poor wording. I managed to fix my margin related queries. The only issue I can't resolve is the "movement": on mobile, the section containing the SheRACES Trail Series logo and hamburger menu moves up/down as I scroll. I need it to be fixed. I attached a clip for reference. Screen Recording 2024-11-18 at 09.22.57.mp4

Thank you tuanphan, that seems to fix the gap between the announcement bar and the secondary (top) navigation but not the movement on mobile, and the alignment of the primary (bottom) navigation

Site URL: https://www.sheracestrailseries.com/ Hello, Referring to this thread as I used the code to create a secondary header, but I need help finessing it please: I created a secondary section above the main navigation menu. It can be seen here (pwd: sh3r@ces), and I have included screenshots. I'd be grateful if you could help with the below (1, 2 and 3 are basically one big question): How do I get the new section to be stacked on top of the Squarespace navigation as opposed to overlapped? If the HTML header height is above a certain height (40px?) It overlaps with the SS header. On mobile, if you scroll up you actually see the SS bar go up by a few pixels, on desktop you’ll notice that the bottom of the grey bar overlaps with the top of the black one Can I increase/decrease the height of the top navigation so that it moves the SS navigation? There’s a little gap on top of the grey bar which I can’t seem to bring to 0. Code Injection <!-- SECONDARY NAVIGATION! --> <div class="header-announcement-bar-wrapper"> <div class="header-content"> <!-- Center-aligned OE Logo --> <img src="https://images.squarespace-cdn.com/content/6719ffef01ce610b15c0b9b8/588037f5-6eeb-4001-aa32-4d43be23b891/OUREA+LOGO+RGB+LANDSCAPE+LIGHT.png?content-type=image%2Fpng" alt="OE Logo" class="oe-logo"> </div> </div> <!--END SECONDARY NAVIGATION! --> CSS header#header { top: 0 !important; margin: unset !important; } .header-announcement-bar-wrapper { top: 48px !important; width: 100%; } /* Navigation With Logos */ /* Base styles for desktop */ .header-announcement-bar-wrapper { margin: auto; width: 100%; display: flex; position: fixed; align-items: center; justify-content: space-between; z-index: 999; /* Keep the custom header above other elements */ padding:0; background-color:black; } .header-content { display: flex; width: 100%; align-items: center; justify-content: center; /* Center the logo horizontally */ background-color: #333333; } .oe-logo { height: 60px; margin: auto; /* Ensures the image is centered in its parent */ }

Hello, could you please advise if this should be posted as a new request given that the initial one was resolved a while ago?

Hello, Responding to this thread as I used the code to create a secondary header, but I need help finessing it please: I created a secondary section above the main navigation menu. It can be seen here (pwd: sh3r@ces), and I have included screenshots. I'd be grateful if you could help with the below (1, 2 and 3 are basically one big question): How do I get the new section to be stacked on top of the Squarespace navigation as opposed to overlapped? If the HTML header height is above a certain height (40px?) It overlaps with the SS header. On mobile, if you scroll up you actually see the SS bar go up by a few pixels, on desktop you’ll notice that the bottom of the grey bar overlaps with the top of the black one Can I increase/decrease the height of the top navigation so that it moves the SS navigation? There’s a little gap on top of the grey bar which I can’t seem to bring to 0. Code Injection <!-- SECONDARY NAVIGATION! --> <div class="header-announcement-bar-wrapper"> <div class="header-content"> <!-- Center-aligned OE Logo --> <img src="https://images.squarespace-cdn.com/content/6719ffef01ce610b15c0b9b8/588037f5-6eeb-4001-aa32-4d43be23b891/OUREA+LOGO+RGB+LANDSCAPE+LIGHT.png?content-type=image%2Fpng" alt="OE Logo" class="oe-logo"> </div> </div> <!--END SECONDARY NAVIGATION! --> CSS header#header { top: 0 !important; margin: unset !important; } .header-announcement-bar-wrapper { top: 48px !important; width: 100%; } /* Navigation With Logos */ /* Base styles for desktop */ .header-announcement-bar-wrapper { margin: auto; width: 100%; display: flex; position: fixed; align-items: center; justify-content: space-between; z-index: 999; /* Keep the custom header above other elements */ padding:0; background-color:black; } .header-content { display: flex; width: 100%; align-items: center; justify-content: center; /* Center the logo horizontally */ background-color: #333333; } .oe-logo { height: 60px; margin: auto; /* Ensures the image is centered in its parent */ }

It worked! thank you!

Thank you, I have made it password protected, the password is Test123

Hello, I introduced a secondary navigation at the top of this page (the two logos and the three roundels for social media icons) using the code below. I would like to bring that blue ticker bar all the way to the top. Is it possible? Thanks in advance. CODE INJECTION <!-- SECONDARY NAVIGATION! --> <div class="header-announcement-bar-wrapper"> <div class="header-content"> <!-- Left-aligned OE Logo --> <img src="https://images.squarespace-cdn.com/content/6719ffef01ce610b15c0b9b8/588037f5-6eeb-4001-aa32-4d43be23b891/OUREA+LOGO+RGB+LANDSCAPE+LIGHT.png?content-type=image%2Fpng" alt="OE Logo" class="oe-logo"> <!-- Center-aligned Event Logo --> <img src="https://images.squarespace-cdn.com/content/6719ffef01ce610b15c0b9b8/1729757251439-YDVSYVP1FXJENQK7JJ6N/Skyline+Scotland+LOGO+WHITE+Unbranded.png?content-type=image%2Fpng" alt="Event Logo" class="event-logo"> <!-- Right-aligned Social Icons --> <div class="social-icons"> <a href="https://youtube.com" target="_blank"> <div class="icon-round youtube"></div> </a> <a href="https://instagram.com" target="_blank"> <div class="icon-round instagram"></div> </a> <a href="https://x.com" target="_blank"> <div class="icon-round twitter"></div> </a> </div> </div> </div> <!--END SECONDARY NAVIGATION! --> CUSTOM CSS /* Navigation With Logos */ /* Base styles for desktop */ .header-announcement-bar-wrapper { background-color: black; /* Changed background color */ width: 100%; padding: 10px 0; display: flex; position: fixed; align-items: center; justify-content: space-between; z-index: 999; /* Keep the custom header above other elements */ } .header-content { display: flex; width: 100%; align-items: center; justify-content: space-between; max-width: 1200px; margin: auto; } .oe-logo, .event-logo { height: 40px; } .social-icons { display: flex; align-items: center; } .icon-round { width: 35px; height: 35px; border-radius: 50%; background-color: #2a99f0; margin-left: 10px; } /* Tablet and mobile (less than 768px) */ @media (max-width: 768px) { .oe-logo { content: url('https://images.squarespace-cdn.com/content/6719ffef01ce610b15c0b9b8/603cba1c-62f8-4634-a7c2-d1ec438a2087/Ourea_Events_Logo_Reverse_Stacked.png?content-type=image%2Fpng'); height: 30px; /* Adjust size for mobile */ } .event-logo { content: url('https://images.squarespace-cdn.com/content/6719ffef01ce610b15c0b9b8/1729757251439-YDVSYVP1FXJENQK7JJ6N/Skyline+Scotland+LOGO+WHITE+Unbranded.png?content-type=image%2Fpng'); height: 30px; /* Adjust size for mobile */ } .icon-round { width: 30px; height: 30px; } /* Add margin for mobile */ .header-content { margin: 40px; } } /* Mobile-specific (less than 480px) */ @media (max-width: 480px) { .oe-logo { height: 40px; } .event-logo { height: 40px; } .icon-round { width: 25px; height: 25px; } } /* Ensure navigation scrolls */ header { margin-top: 50px; /* Space for the default navigation */ } /* Increased margin for mobile */ @media (max-width: 768px) { header { margin-top: 100px; /* Increase margin on mobile */ } }