Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

wonderwebber

Member
  • Posts

    6
  • Joined

  • Last visited

  1. 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.
  2. 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.
  3. 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!
  4. 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.
  5. Hi bangank36, Thanks very much for your response and CSS suggestion. This code worked perfectly. So appreciate your help with this.
  6. 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.
×
×
  • Create New...