Jump to content

How to adjust rollover behavior of site header

Go to solution Solved by tuanphan,

Recommended Posts

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!

Screenshot 2024-05-22 at 5.51.13 PM.png

Link to comment
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!

Screenshot 2024-05-22 at 5.51.13 PM.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

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
  • Solution
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;
}

 

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

live-section-underline.png

before-heaer-middle of page.png

before-header-top of page.png

Link to comment

#1. You mean move line from white to red position?

image.png.d083212b0275ff6a912b624ae2cbeaf7.png

 

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

image.png.33158d532ccfab968b97853eae2d3351.png

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.