moonlitdesign Posted February 26 Share Posted February 26 (edited) I've designed this landing page for my website, and now i'm stuck on what process to take. I want the logo to be initially fixed and then the image to overlap on scroll. The logo needs to then shrink down to a monogram style version once we come to the second section of the site (the section below the landing page). The navigation menu links need to be sticky and where they are the whole time. Do I, a) have the logo set as a header title/logo or b) hide the header logo, just have the nav links to deal with and then have the logo as an image on the landing page? (shown here). if i do option b, this is what i need to do/need help with: Initial Setup: - Hide the header logo initially. - Implement the navigation menu links as sticky. - Make the menu navigation links vertically stacked, and left aligned to the full width of the page. - Add the circle icon above the nav links. Landing Page: - Display the logo as an svg image on the landing page. - Ensure it's initially fixed in position. Scroll Effects: - Use CSS or JavaScript to create the overlap effect of the image on scroll. - Make the necessary adjustments to ensure the logo behaves as desired during scrolling. Second Section: - Detect when the user scrolls to the second section. - Trigger the logo to shrink down to the monogram style version using CSS or JavaScript. https://www.moonlitdesign.uk/home-old Edited February 27 by moonlitdesign Link to comment
tuanphan Posted February 29 Share Posted February 29 Hi, I see you figured it out or still need help? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
moonlitdesign Posted February 29 Author Share Posted February 29 (edited) On 2/29/2024 at 8:52 AM, tuanphan said: Hi, I see you figured it out or still need help? @tuanphan I've managed to align the menu, but I am struggling to achieve the desired logo effect please see other thread: Edited March 1 by moonlitdesign Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment