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

Seeking CSS to underline menu item associated with the one active page on drop-down menu


Question

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!

Link to comment
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0
On 7/25/2021 at 6:09 PM, wonderwebber said:

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!

Hi. Edit this code

.header-nav-item--active a {
    background-image: none !important;
    border-bottom: 1px solid currentColor !important;
}

to this (I added symbol > after --active)

.header-nav-item--active>a {
    background-image: none !important;
    border-bottom: 1px solid currentColor !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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.

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