Beardo-Designs Posted April 14, 2023 Posted April 14, 2023 My site: beardodesigns.squarespace.com password: 1234 I am stuck figuring out how to remove the underline on the active page on my navigation. I would think it would be something simple but I am having a hard time wrapping my head around it and no matter what I try and Google I can seem to find a solution. Here is a snippet of the CSS from my navigation. As you can see I have my bottom border on my active, yet I want to hide that when you hover. As you can see if you hover over the active page you still get a bottom border that transitions in. I am still fairly new with CSS and still learning, anything would be greatly appreciated! // Nav bar // .header-nav-item::after { content: ''; background: #FFCC66; //color height: 1px; //thickness width: 0; display: block; transition: width 2s ease; //animation speed margin: 0 auto; } .header-nav-item:hover::after { width: 100%; } .header-nav-item--active a { background-image: none !important; }
qosmic Posted April 15, 2023 Posted April 15, 2023 Let me know if this does it: .header-nav-item--active:hover { a,span { background-image:none !important; text-decoration:none !important; } } .techCRM | Email Marketing | eCommerce | Accounting Systems | Data Migration | Automation | App IntegrationsOur Mission - Contact
tuanphan Posted April 19, 2023 Posted April 19, 2023 This code should work for Active Item .header-nav-item--active a, .header-menu-nav-item--active .header-menu-nav-item-content { background-image: none !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment