Highlight my main drop down menu

Site URL: http://www.gsmpat.com

Just trying to figure out how to add highlight to my main drop down menu.

On 9/22/2021 at 7:05 AM, GSMPAT said:

Site URL: http://www.gsmpat.com

Just trying to figure out how to add highlight to my main drop down menu.

Hi,

For hover item or active item or all items?

I just want to add highlight to main menu choices from the pull-down. All menu pull-downs throughout the site. 😄 I wish I knew more, I'm trying to learn, though. Any help would be greatly appreciated. ( I don't know the syntax and where to drop the code)

On 9/25/2021 at 9:43 PM, GSMPAT said:

I just want to add highlight to main menu choices from the pull-down. All menu pull-downs throughout the site. 😄 I wish I knew more, I'm trying to learn, though. Any help would be greatly appreciated. ( I don't know the syntax and where to drop the code)

 

Add to Design > Custom CSS

.Header-nav--primary .Header-nav-item:not(:last-child) {
    border-bottom: 1px solid white;
}

Thanks so much Tuanphan but is there any way to highlight the pulldown menu page selection. Right now your code just put an underline under pulldowns but the actual page selections still don't highlight. 😄 Blessings, Mark  

On 9/28/2021 at 6:38 PM, GSMPAT said:

Thanks so much Tuanphan but is there any way to highlight the pulldown menu page selection. Right now your code just put an underline under pulldowns but the actual page selections still don't highlight. 😄 Blessings, Mark  

Hi,

You mean

for example, when users on Gallery2 page, you want to hightlight Gallery items on navigation?

https://www.gsmpat.com/gallery2

Correct- Gallery and Info (at lease for now). A basic example would be  the dropdowns like the following site: https://www.thechapel.org 

I work for a non-profit org. So we try to do everything in house, your help is greatly appreciated. 

Thank you so very much!  Mark

On 10/1/2021 at 4:14 AM, GSMPAT said:

Correct- Gallery and Info (at lease for now). A basic example would be  the dropdowns like the following site: https://www.thechapel.org 

I work for a non-profit org. So we try to do everything in house, your help is greatly appreciated. 

Thank you so very much!  Mark

Use this CSS

a.Header-nav-folder-item--active {
    border-bottom: 1px solid white;
}

Thanks tuanphan for the reply. For some reason the codes not making any difference on the page. I'm so confused. 😕  

Ps. The below code you gave me a few days ago did cause a bit of a change on the dropdowns, it added and underline under the nav menu options. (pages)

Pss. You think it could be the existing template code is superseding the new css code? 😕

.Header-nav--primary .Header-nav-item:not(:last-child) {
    border-bottom: 1px solid white;
}

On 10/5/2021 at 2:14 AM, GSMPAT said:

Thanks tuanphan for the reply. For some reason the codes not making any difference on the page. I'm so confused. 😕  

Ps. The below code you gave me a few days ago did cause a bit of a change on the dropdowns, it added and underline under the nav menu options. (pages)

Pss. You think it could be the existing template code is superseding the new css code? 😕

 

.Header-nav--primary .Header-nav-item:not(:last-child) {
    border-bottom: 1px solid white;
}

Hi,

I see it worked here (It is underline)

Hiya tuanphan. Thank you for your reply. I see what your saying and indeed your code added a bottom border but what I really need is to add a highlight on hover to the drop-down menu options (pages) 😄. 

Blessings,

Mark

On 10/9/2021 at 4:52 AM, GSMPAT said:

Hiya tuanphan. Thank you for your reply. I see what your saying and indeed your code added a bottom border but what I really need is to add a highlight on hover to the drop-down menu options (pages) 😄. 

 

Blessings,

 

Mark

Use this code

a.Header-nav-folder-item--active {
  background-color: violet !important;
}