Jump to content

Highlight my main drop down menu

Recommended Posts

  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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)

 

Edited by GSMPAT
Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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  

Edited by GSMPAT
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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;
}
Link to comment
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)

image.thumb.png.39184848bb1a9e423c0359360c0c3550.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.