wonderwebber

Hi tuanphan - Thanks for checking in. When I hover-over the hamburger menu or the "X" (when the mobile menu is showing), I would like the color of each of these to be updated from red to green.

Hi bangank36 - Thanks for your offer to help. I have a site that I'm able to share. It is at: https://crimson-armadillo-4gj9.squarespace.com/ with password: secret On this site, the hamburger menu is red when you're at the top of the page and white when you scroll down the page. I'd like to know how to update the color of the hamburger menu when you hover over it - let's say - update its color to green. When the mobile menu is showing, I'd also like to know how to up the color of the "X" on hover over Thanks in advance for your help with this!

I asked this question as part of another query that I submitted and I received the following response that I wanted to share on this thread: After using the dev tool in this site https://lightsandtracks.squarespace.com/, i think this is the configuration to set hover effect. .header-menu-nav-item a:hover { color: #ff524a !important; } a:hover { color: #ff524a !important; opacity: 1 !important; text-decoration: none !important; } .header-menu-nav-item a:hover::after { content: '→' !important; font-size: 3.2rem; color: #ff524a; font-family: 'FunktionalGrotesk-Book'; -o-transition: all .5s; -ms-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; opacity: 1 !important; }

Site URL: https://lightsandtracks.squarespace.com/ I'm trying to update the color of my hamburger menu on hover over similar to the behavior seen on the site at: https://lightsandtracks.squarespace.com/. I'm not skilled enough to extract the hover over CSS from this site. Maybe someone can help me with that? I can't reveal our site's URL but I have figured out the CSS to update the color of the hamburger menu, either (1) or (2) below: (1) .burger-inner .top-bun, .burger-inner .patty, .burger-inner .bottom-bun { background-color: white!important; } (2) .burger-inner>div { background-color: white !important; } Then I tried the following to update the color to red on hover over, but it only updates the color of each of the horizontal lines of the hamburger menu but not all three at once: .burger-inner>div:hover { background-color: red !important; } If someone can suggest what CSS I can use to update the color all 3 sections of the hamburger menu on hover over I'd love to know.

Hi tuanphan - Thanks so much for your suggestion. That was the first part of the solution I was looking for - to underline the top-level menu item ("Services") and not all the sub-menu items. With your suggestion I was able to figure out the next part of the solution which was to underline the single menu item on the sub-menu that is associated with the current / active page. The CSS I used was: body:not(.header--menu-open) .black .header-nav-item--active .header-nav-folder-item--active>a { background-image: none !important; border-bottom: 1px solid currentColor !important; } I'm not sure if that's the most efficient CSS but it seems to work fine. Here is the related CSS for the hover-over (for top and sub-menu items): .header-nav-item>a:hover { border-bottom: 1px solid currentColor !important; } body:not(.header--menu-open) .black .header-nav-item .header-nav-folder-item>a:hover { border-bottom: 1px solid currentColor !important; } Thanks again for your help with this.

Thanks for checking in. I don't thinkn I changed the site title to the logo image, but I am leaning toward adding the black header section to the "Contact" page and then updating the style of the "Contact" page to match the other pages as it's just too hard to manage 2 different styles. Bottom Line - I'm all set with this query. No need to follow up. Thanks so much for checking in.

Site URL: https://sswebdev-one.squarespace.com/ Site URL: https://sswebdev-one.squarespace.com/ The password for our site is: secret Here are the steps to reproduce the issue I'm trying to solve: 1) Hover over the "Services" menu item and select "Advocacy" from the drop-down menu that appears. 2) Hover over the "Services" menu item again. Actual Result: All the the menu items on the "Services" menu are underlined. Expected Result: I expected only the "Advocacy" menu item to be the only menu item that was underlined as that is the current page. This is the CSS I have defined for underlining the current / active page: .header-nav-item--active a { background-image: none !important; border-bottom: 1px solid currentColor !important; } This works fine for the top-level menu items but not for the menu items on the sub-menu. If you can suggest what CSS I should use to underline just the menu item of the current active page, I'd appreciate your suggestions. Thank you!

Site URL: https://sswebdev-one.squarespace.com/ Site URL: https://sswebdev-one.squarespace.com/ The password for our site is: secret Here are the steps to reproduce the issue I'm trying to solve: 1) Go to the "Contact Us" page at: https://sswebdev-one.squarespace.com/contact-us 2) Adjust the width of your browser so that it's narrow enough to have the mobile hamburger menu display. 3) Scroll down the page so that the black background appears in the header area. 4) Click on the mobile hamburger menu. Actual Result: The website header text "Test Site" appears in white and it's not visible. Desired Result: I would like the "Test Site" text to appear orange. I defined this CSS (for the "Initiatives" and "Contact Us" pages): #collection-5d375e74792ad1000134157d, #collection-5d3773b4c6dce00001b488b3 { .tweak-fixed-header .shrink.header .header-title-logo a:after { color: orange!important; } } but I think this CSS (below) is overriding the CSS for the "Initiatives" and "Contact Us" pages: /* Set font color of site title text to white on scroll */ .tweak-fixed-header .shrink.header .header-title-logo a:after { color: white !important; } Thanks in advance for any suggestions you have.

Hi bangank36, Thanks very much for your response and CSS suggestion. This code worked perfectly. So appreciate your help with this.

Site URL: https://sswebdev-one.squarespace.com/ The password for our site at: https://sswebdev-one.squarespace.com/ is: secret On the "Initiatives" (https://sswebdev-one.squarespace.com/initiatives) and "Contact" (https://sswebdev-one.squarespace.com/contact-us) pages of our website the hamburger menu icon is red when we're at the top of the page. (in a narrow browser or on a phone) I would like to update the color of the hamburger menu to white when you scroll down the page. I have defined the following CSS but it doesn't seem to be working as the hamburger menu remains red on scrolling: #collection-5d375e74792ad1000134157d, #collection-5d3773b4c6dce00001b488b3 { .tweak-fixed-header .shrink.header .burger-inner > div { background-color: white!important; } } If you have any suggestions on how I can achieve the change in color of the hamburger menu icon on scroll I'd appreciate your feedback.