Jollybeef Posted May 22 Share Posted May 22 I've searched on this extensively with no luck...can someone please advise on how to do one of the following with custom code or CSS? My goal is to make the rollover menu appearance / opacity the same as the site header in the screenshot below: Adjust the opacity of the rollover menu so that it ignores the site header (i.e. no stacking one opacity on top of the other) Move the rollover items (and only the rollover items) downward so they start with the bottom edge of the site header? As it stands now, the rollover items don't match the site header color / opacity. This site isn't live yet, so hopefully the trial link / screenshot is enough? Many thanks in advance! Link to comment
Beyondspace Posted May 22 Share Posted May 22 1 hour ago, Jollybeef said: I've searched on this extensively with no luck...can someone please advise on how to do one of the following with custom code or CSS? My goal is to make the rollover menu appearance / opacity the same as the site header in the screenshot below: Adjust the opacity of the rollover menu so that it ignores the site header (i.e. no stacking one opacity on top of the other) Move the rollover items (and only the rollover items) downward so they start with the bottom edge of the site header? As it stands now, the rollover items don't match the site header color / opacity. This site isn't live yet, so hopefully the trial link / screenshot is enough? Many thanks in advance! Can you share your URL so I can take a look? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Jollybeef Posted May 23 Author Share Posted May 23 20 hours ago, Beyondspace said: Can you share your URL so I can take a look? Sure thing - thanks. Password is "password": https://platinum-bird-789c.squarespace.com Link to comment
Solution tuanphan Posted May 25 Solution Share Posted May 25 On 5/24/2024 at 2:23 AM, Jollybeef said: Sure thing - thanks. Password is "password": https://platinum-bird-789c.squarespace.com Try this code to Website Tools > Custom CSS div.header-nav-item>a { height: 93px !important; display: flex; align-items: center; } div.header-announcement-bar-wrapper { padding-top: 0px !important; padding-bottom: 0px !important; } Jollybeef 1 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
Jollybeef Posted May 25 Author Share Posted May 25 5 hours ago, tuanphan said: Try this code to Website Tools > Custom CSS div.header-nav-item>a { height: 93px !important; display: flex; align-items: center; } div.header-announcement-bar-wrapper { padding-top: 0px !important; padding-bottom: 0px !important; } Thanks so much @tuanphan! The header opacity issue seems to be fixed. I noticed a few things after plugging in the code: If you view this page: https://platinum-bird-789c.squarespace.com/video-multimedia Is there a way to move the underline showing the active section ("Services" in the attached screen shot) closer to the text? On mobile, I also noticed that the header shortened, compared to its height in the attached "before" screen shots. Before this new code, it was one height at the top of the page, then shortened a tiny bit after scrolling down. Is there a way to increase that height for mobile? Thanks again for the help!! Link to comment
tuanphan Posted May 26 Share Posted May 26 #1. You mean move line from white to red position? #2. Use this new code to make it run on desktop only @media screen and (min-width:992px) { div.header-nav-item>a { height: 93px !important; display: flex; align-items: center; } div.header-announcement-bar-wrapper { padding-top: 0px !important; padding-bottom: 0px !important; } } 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
Jollybeef Posted May 27 Author Share Posted May 27 @tuanphan Thanks! Replying to your previous notes: Yes! The red line / position in your mockup would be perfect for the underline. The new code worked! The header height looks great on mobile. Link to comment
tuanphan Posted May 30 Share Posted May 30 On 5/28/2024 at 3:20 AM, Jollybeef said: @tuanphan Thanks! Replying to your previous notes: Yes! The red line / position in your mockup would be perfect for the underline. The new code worked! The header height looks great on mobile. #1. You can use this CSS code div.header-nav-item--active>a { background-image: none !important; position: relative; } div.header-nav-item--active>a:after { content: ""; background-color: red; height: 1px; width: 100%; position: absolute; bottom: 35px; } Jollybeef 1 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
Jollybeef Posted May 30 Author Share Posted May 30 @tuanphan This is perfect! Thanks so much again for all of your help and expertise. tuanphan 1 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