How can I change menu links colour on hover to a solid pill shaped background?

Site URL: https://round-algae-fj2m.squarespace.com/

Hi, I'm looking to add a solid coloured pill shaped background to all the menu links in my header section when they are hovered over. I've tried a few different codes I found online but none seem to be working, any ideas?

On 6/28/2021 at 7:40 PM, NMcMurray said:

Site URL: https://round-algae-fj2m.squarespace.com/

Hi, I'm looking to add a solid coloured pill shaped background to all the menu links in my header section when they are hovered over. I've tried a few different codes I found online but none seem to be working, any ideas?

Hi. Your site is private. Can you setup password & share url?

Sorry, thought i'd updated it.  Password is: WaveTest

Site URL: https://round-algae-fj2m.squarespace.com/

Thanks!

On 6/30/2021 at 11:29 PM, NMcMurray said:

Sorry, thought i'd updated it.  Password is: WaveTest

Site URL: https://round-algae-fj2m.squarespace.com/

Thanks!

Add to Design > Custom CSS

/* nav hover */
.header-nav-item a:hover {
    background-color: white;
    color: black !important;
    padding: 10px 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
nav.header-nav-list {
    align-items: center;
}

5 hours ago, tuanphan said:

Add to Design > Custom CSS

/* nav hover */
.header-nav-item a:hover {
    background-color: white;
    color: black !important;
    padding: 10px 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
nav.header-nav-list {
    align-items: center;
}

 

Thank you so much! It works perfectly. I have one more question if that's okay. Is there a way to make the background shape/colour that appears on hover to stay when it is clicked on. For instance if you hover and click on the about page it will appear with the blue pill shaped background, but i'm looking for it to stay visible when you're reading the about page. Not sure if that's possible.

Many thanks,

Nicola

17 hours ago, NMcMurray said:

Thank you so much! It works perfectly. I have one more question if that's okay. Is there a way to make the background shape/colour that appears on hover to stay when it is clicked on. For instance if you hover and click on the about page it will appear with the blue pill shaped background, but i'm looking for it to stay visible when you're reading the about page. Not sure if that's possible.

Many thanks,

Nicola

Remove above & add new code

/* nav effect */
.header-nav-item a {
    padding: 10px 10px !important;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px
    border-color: transparent;
    background-image: none !important;
}
.header-nav-item a:hover {
    background-color: #a8dbf0;
    color: #1c2d4d !important;
}

nav.header-nav-list {
    align-items: center;
}

7 hours ago, tuanphan said:

Remove above & add new code

/* nav effect */
.header-nav-item a {
    padding: 10px 10px !important;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px
    border-color: transparent;
    background-image: none !important;
}
.header-nav-item a:hover {
    background-color: #a8dbf0;
    color: #1c2d4d !important;
}

nav.header-nav-list {
    align-items: center;
}

 

Hi thanks for your speedy response.

I've tried the above code but unfortunately it doesn't allow the solid pill shaped background to stay active once you're on the desired page. It goes back to only appearing on hover. Is there another bit of code that would allow this?

Many thanks for all your help.

On 7/3/2021 at 10:11 PM, NMcMurray said:

Hi thanks for your speedy response.

I've tried the above code but unfortunately it doesn't allow the solid pill shaped background to stay active once you're on the desired page. It goes back to only appearing on hover. Is there another bit of code that would allow this?

Many thanks for all your help.

Use new code

.header-menu-nav-item a {
    font-size: 25px
}

.header-nav-item a {
    padding: 10px 10px !important;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-color: transparent;
    background-image: none !important
}

.header-nav-item a:hover, .header-nav-item--active a {
    background-color: #a8dbf0;
    color: #1c2d4d !important;
}

nav.header-nav-list {
    align-items: center;
}

4 hours ago, tuanphan said:

Use new code

.header-menu-nav-item a {
    font-size: 25px
}

.header-nav-item a {
    padding: 10px 10px !important;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-color: transparent;
    background-image: none !important
}

.header-nav-item a:hover, .header-nav-item--active a {
    background-color: #a8dbf0;
    color: #1c2d4d !important;
}

nav.header-nav-list {
    align-items: center;
}

 

Thank you!! This is exactly what i was looking for. Many thanks.

On 7/5/2021 at 7:54 PM, NMcMurray said:

Thank you!! This is exactly what i was looking for. Many thanks.

 

Do you need solve these?

Site URL: https://round-algae-fj2m.squarespace.com/
1. (Mobile – Individuals) There is white spacing between header and background image.

https://round-algae-fj2m.squarespace.com/individuals

2. (All devices – Individuals/Education settings) when I click on Get in touch, it just reload the page and background images don’t show in full size.

https://round-algae-fj2m.squarespace.com/education-settings

https://round-algae-fj2m.squarespace.com/individuals

3. (Tablet – Header)  Want to align social icons-menu items?

Hi, really appreciate you flagging other potential issues.

1. I need to sort out the images as there shouldn't be white space at the top. I have replaced with full size image that corrects this, however is there a way to stop Squarespace zooming in and cropping them across all devices when inserted as background image? The main parts of the image tend to be lost. I.e when in desktop view looking at the 'Individuals' page, the womens head is cropped off, and in mobile view, i've had to change the focal point to be on the kids in order for it show something. Ideally I would like them to be the same across all devices.. or as close to. If that's possible?

2. All the buttons should now work as they should. I hadn't finished linking everything. 

3. Yes i'd love to know how to align the social icon on tablet view. Does Squarespace allow you to view in tablet mode in order to check everything is as it should? Or is it the case that you need to view on an actual tablet?

Many thanks again.

Nicola

16 hours ago, NMcMurray said:

Hi, really appreciate you flagging other potential issues.

 

1. I need to sort out the images as there shouldn't be white space at the top. I have replaced with full size image that corrects this, however is there a way to stop Squarespace zooming in and cropping them across all devices when inserted as background image? The main parts of the image tend to be lost. I.e when in desktop view looking at the 'Individuals' page, the womens head is cropped off, and in mobile view, i've had to change the focal point to be on the kids in order for it show something. Ideally I would like them to be the same across all devices.. or as close to. If that's possible?

2. All the buttons should now work as they should. I hadn't finished linking everything. 

3. Yes i'd love to know how to align the social icon on tablet view. Does Squarespace allow you to view in tablet mode in order to check everything is as it should? Or is it the case that you need to view on an actual tablet?

Many thanks again.

Nicola

Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* individuals */
[data-section-id="60d9e8d1b93ef305f0aac5b8"] {
    min-height: unset !important;
    height: 75vh;
}
[data-section-id="60d9e8d1b93ef305f0aac5b8"] img {
    object-position: 65% !Important;
    margin-top: 10vh;
}
}
/* tablet overlay */
@media screen and (max-width:991px) and (min-width:768px) {
body.header--menu-open .header-menu-actions {
    margin-right: 7vw;
}
}

To view in tablet >> Right click on any where on your site >> Right click >> Click Inspect or Inspect Element >> Choose iPad on top of window.

Hi Tuan, thanks so much. I'm nearly there with the site, however I have one last query. I have included a slideshow: simple gallery section for my client to add testimonials to. When viewed on desktop the image is the perfect size but on mobile it was cropped. To resolve this I have added some code to reduce the overall image size and reduce the padding at the top and bottom. Unfortunately this now makes the overall image pretty small and it doesn't look right when viewed on mobile. Is there a way round this? It needs to be pretty straightforward for my client to add more images(text) to over time. 

Oh also one last thing, is there an option to add a search button in amongst the social icons in the header? So that users of the website could search for a specific word or detail?

Many thanks,

Nicola

On 7/16/2021 at 6:50 PM, NMcMurray said:

Hi Tuan, thanks so much. I'm nearly there with the site, however I have one last query. I have included a slideshow: simple gallery section for my client to add testimonials to. When viewed on desktop the image is the perfect size but on mobile it was cropped. To resolve this I have added some code to reduce the overall image size and reduce the padding at the top and bottom. Unfortunately this now makes the overall image pretty small and it doesn't look right when viewed on mobile. Is there a way round this? It needs to be pretty straightforward for my client to add more images(text) to over time. 

 

Oh also one last thing, is there an option to add a search button in amongst the social icons in the header? So that users of the website could search for a specific word or detail?

Many thanks,

Nicola

Q1. On which page?

Q2. Follow this https://www.will-myers.com/articles/adding-a-search-bar-to-your-header-in-squarespace-71#:~:text=And the answer is YES,move it to your header.&text=Disclaimer%3A that this is just my one solution.