How to adjust rollover behavior of site header

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!

20 hours ago, Beyondspace said:

Can you share your URL so I can take a look?

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!!

#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;
}
}

@tuanphan Thanks! Replying to your previous notes:

1. Yes! The red line / position in your mockup would be perfect for the underline.
2. The new code worked! The header height looks great on mobile.

On 5/28/2024 at 3:20 AM, Jollybeef said:

@tuanphan Thanks! Replying to your previous notes:

1. Yes! The red line / position in your mockup would be perfect for the underline.
2. 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;
}

@tuanphan This is perfect! Thanks so much again for all of your help and expertise.