Rachelbuccalo Posted July 23, 2022 Share Posted July 23, 2022 Site URL: https://www.rachelcruzbuccalo.com/ Hello all, I am looking for any help/advice on how to get rid of the underline beneath the active page's navigational link. Currently, I have code that bolds the links on hover, but I'm having trouble with the code that would remove all underlines from the header. I have successfully removed the underlines from links in text sections. Below I will attach the code currently applied to the header and a screenshot of the navigation bar when the Work Page is open. Thank you! a { text-decoration: none !important; } a { background-image: none !important; } header a:hover { font-weight: 900; } .header-nav-folder-content {background-color: transparent!important} .header-announcement-bar-wrapper [href="/main-navigation"], .header-menu--folder-list .header-menu-nav-item [href="/main-navigation"]{ background-image: url(https://www.freeiconspng.com/thumbs/cross-png/cross-png-28.png)!important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; color: transparent !important; } /* dropdown menu text size */ .header-nav-folder-content a { font-size: 18px; } .header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content { right: -100px !important; } .header-nav .header-nav-item--folder .header-nav-folder-content { top: -9px !important; } Link to comment
Solution Beyondspace Posted July 24, 2022 Solution Share Posted July 24, 2022 15 hours ago, Rachelbuccalo said: Site URL: https://www.rachelcruzbuccalo.com/ Hello all, I am looking for any help/advice on how to get rid of the underline beneath the active page's navigational link. Currently, I have code that bolds the links on hover, but I'm having trouble with the code that would remove all underlines from the header. I have successfully removed the underlines from links in text sections. Below I will attach the code currently applied to the header and a screenshot of the navigation bar when the Work Page is open. Thank you! a { text-decoration: none !important; } a { background-image: none !important; } header a:hover { font-weight: 900; } .header-nav-folder-content {background-color: transparent!important} .header-announcement-bar-wrapper [href="/main-navigation"], .header-menu--folder-list .header-menu-nav-item [href="/main-navigation"]{ background-image: url(https://www.freeiconspng.com/thumbs/cross-png/cross-png-28.png)!important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; color: transparent !important; } /* dropdown menu text size */ .header-nav-folder-content a { font-size: 18px; } .header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content { right: -100px !important; } .header-nav .header-nav-item--folder .header-nav-folder-content { top: -9px !important; } Kindly try adding to Home > Design > Custom Css body:not(.header--menu-open) .header-nav-folder-item--active .header-nav-folder-item-content { font-weight: bold; background: none; } Let me know how it works on your site BrandenAndersen 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted July 24, 2022 Share Posted July 24, 2022 My testing BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
BrandenAndersen Posted August 30, 2022 Share Posted August 30, 2022 On 7/24/2022 at 6:33 AM, bangank36 said: Kindly try adding to Home > Design > Custom Css body:not(.header--menu-open) .header-nav-folder-item--active .header-nav-folder-item-content { font-weight: bold; background: none; } Let me know how it works on your site This worked for me! Thanks so much. Beyondspace 1 Link to comment
LonniWong Posted December 19, 2022 Share Posted December 19, 2022 On 7/24/2022 at 3:33 PM, Beyondspace said: Kindly try adding to Home > Design > Custom Css body:not(.header--menu-open) .header-nav-folder-item--active .header-nav-folder-item-content { font-weight: bold; background: none; } Let me know how it works on your site hello, to me this is unfortunately not working. i have also tried: .header-nav-folder-item--active .header-nav-folder-item-content { text-decoration: none; background: none; } Do you have also a solution to me @Beyondspace?🙏 Link to comment
Beyondspace Posted December 20, 2022 Share Posted December 20, 2022 23 hours ago, LonniWong said: hello, to me this is unfortunately not working. i have also tried: .header-nav-folder-item--active .header-nav-folder-item-content { text-decoration: none; background: none; } Do you have also a solution to me @Beyondspace?🙏 You can try body:not(.header--menu-open) .header-nav-item--active>a { background: none; font-weight: bold; } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted December 20, 2022 Share Posted December 20, 2022 My testing BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
LonniWong Posted December 21, 2022 Share Posted December 21, 2022 1 hour ago, Beyondspace said: You can try body:not(.header--menu-open) .header-nav-item--active>a { background: none; font-weight: bold; } Amazing! thanks a lot 🙏 Beyondspace 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment