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

Taking away underlining on button i added on nav

Question

Hello,

I have added a underline when i hover over my menu items. The code being 

.Header-nav-item::after {
  content: '';
  background: #000;
  height: 2px;
  width: 0;
  display: block;
  margin-top: 2px !important;
  transition: width 1s;
  margin: 0 auto;
}
.Header-nav-item:hover::after {
  width: 100%;
}
But as i have made my last item on the nav as a button, i dont want the underlining to appear when i hover on that. 
Could someone give me a code to exclude this button from the underlining. 
 
Thank you!

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

You've forgotten to include a working link to your site. To help, we need to see the issue first hand. If the site isn't live, we need you to set a password in the visibility settings and tell us what it is.


World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm usually booked 4 - 6 weeks in advance for jobs longer than 2 hours.
Prebuilt Squarespace Extensions
Custom Squarespace Extensions: Tell me about the functionality you need

**NEW** Our popular Date Picker Extension and Age Verification Extension are now Squarespace 7.1 compatible.

Share this post


Link to post
  • 0
On 1/27/2020 at 1:51 PM, oskarfishwick said:

No its not fixed.

your code

.Header-nav-item::after {
  content: '';
  background: #000;
  height: 2px;
  width: 0;
  display: block;
  margin-top: 2px !important;
  transition: width 1s;
  margin: 0 auto;
}
.Header-nav-item:hover::after {
  width: 100%;
}

change it to

.Header-nav-item:not(:last-child)::after {
    content: '';
    background: #000;
    height: 2px;
    width: 0;
    display: block;
    margin-top: 2px !important;
    transition: width 1s;
    margin: 0 auto
}

.Header-nav-item:not(:last-child):hover::after {
    width: 100%
}

 


Send me a message if you have any questions (free 10 minutes).

Don't send to forum message. I will check all questions via the link above

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...