viccismarshall Posted March 4, 2021 Share Posted March 4, 2021 Site URL: https://fulcrum-diligence.squarespace.com/ I'm sure this is super simple, but would be very grateful if someone could let me know where I am going wrong please!! I have included this CSS to have both change of colour on hover and a line underneath each nav item when on that page (active). It works for normal page items, but doesn't appear underneath the folder nav items when any of the items under the folders are active. This is what I have: .Header-nav-item:hover { color: #00b5e2 !important; } .header-nav-folder-item--active { border-bottom: 2px solid #00b5e2; } .Header-nav-item--active { border-bottom: 2px solid #00b5e2; } Password to site is fulcrum Thank you in advance! Link to comment
tuanphan Posted March 7, 2021 Share Posted March 7, 2021 Use this code /* folder */ .header-nav-folder-item--active a { border-bottom: 2px solid #000000; } 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!) Link to comment
viccismarshall Posted March 10, 2021 Author Share Posted March 10, 2021 Hi Tuanphan, Thanks so much for helping! I've tried that but it still doesn't work for some reason sorry? It's still blank underneath when clicked on. Any chance you have any other ideas? Thank you! Link to comment
tuanphan Posted March 20, 2021 Share Posted March 20, 2021 On 3/10/2021 at 6:20 PM, viccismarshall said: Hi Tuanphan, Thanks so much for helping! I've tried that but it still doesn't work for some reason sorry? It's still blank underneath when clicked on. Any chance you have any other ideas? Thank you! Try adding this a.Header-nav-item.Header-nav-item--active { color: black !important; border-bottom: 2px solid black !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!) Link to comment
viccismarshall Posted March 22, 2021 Author Share Posted March 22, 2021 Hello, Thank you so much for this - it seems to work on the normal pages on the nav, but not the nav folders; I have this css to change the drop down on the folders - is this interrupting it do you think? // Folder Pointer // .Header-nav-folder:before { content: ''; color: hsl(192, 100%, 45%); display: block; width: 0; height: 0; border-width: 0 0 15px; border-style: solid; border-right: solid 15px transparent; border-left: solid 15px transparent; position: absolute; top: -15px; left: 50%; margin-left: -15px } // Main Folder // .Header-nav-folder { border-top: solid 5px hsl(192, 100%, 45%) !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 150%; text-align: center; align-content: center; left: -99999 !important; margin-left: -110px !important; width: 220px; z-index: 1002; padding: 1em; opacity: 0; white-space: nowrap; -webkit-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); -ms-transform: translate3d(0, 10px, 0); -o-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); -webkit-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out; -moz-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out; -ms-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out; -o-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out; transition: left 0s .2s ease-out, transform 0s .2s linear, opacity 0.2s ease-out; } Thank you!! Link to comment
tuanphan Posted March 24, 2021 Share Posted March 24, 2021 On 3/22/2021 at 8:21 PM, viccismarshall said: Hello, Thank you so much for this - it seems to work on the normal pages on the nav, but not the nav folders; I have this css to change the drop down on the folders - is this interrupting it do you think? // Folder Pointer // .Header-nav-folder:before { content: ''; color: hsl(192, 100%, 45%); display: block; width: 0; height: 0; border-width: 0 0 15px; border-style: solid; border-right: solid 15px transparent; border-left: solid 15px transparent; position: absolute; top: -15px; left: 50%; margin-left: -15px } // Main Folder // .Header-nav-folder { border-top: solid 5px hsl(192, 100%, 45%) !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 150%; text-align: center; align-content: center; left: -99999 !important; margin-left: -110px !important; width: 220px; z-index: 1002; padding: 1em; opacity: 0; white-space: nowrap; -webkit-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); -ms-transform: translate3d(0, 10px, 0); -o-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); -webkit-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out; -moz-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out; -ms-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out; -o-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out; transition: left 0s .2s ease-out, transform 0s .2s linear, opacity 0.2s ease-out; } Thank you!! Hi. Sorry for the delay. Do you still need help? 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!) Link to comment
charlieredel Posted September 2, 2021 Share Posted September 2, 2021 @tuanphan Hey!! i've used code to make a line appear under the page names in nav when you hover but is there a way to make the line stay on the active page? Link to comment
tuanphan Posted September 5, 2021 Share Posted September 5, 2021 On 9/3/2021 at 5:55 AM, charlieredel said: @tuanphan Hey!! i've used code to make a line appear under the page names in nav when you hover but is there a way to make the line stay on the active page? Hi, Can you share link to your site? We can check easier 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!) Link to comment
charlieredel Posted September 5, 2021 Share Posted September 5, 2021 @tuanphan yep! https://tutufilms.squarespace.com/config/ thats the site and the password is tutufilms 🙂 Link to comment
tuanphan Posted September 7, 2021 Share Posted September 7, 2021 On 9/3/2021 at 5:55 AM, charlieredel said: @tuanphan Hey!! i've used code to make a line appear under the page names in nav when you hover but is there a way to make the line stay on the active page? Hi, It looks like you solved with this CSS? body:not(.header--menu-open) .header-nav-item--active a { background-repeat: repeat-x; background-image: linear-gradient(to right,currentColor 100%,currentColor 0); background-size: 1px 1px; background-position: 0 calc(100% - 0.1em); } 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!) Link to comment
charlieredel Posted September 7, 2021 Share Posted September 7, 2021 @tuanphan i did thank you!! 🙂 Link to comment
FluentStudios Posted March 16, 2023 Share Posted March 16, 2023 @charlieredel Did you ever figure this out? How to get nav items in a folder to underline on hover? I've tried all the suggestions in this thread and none work. Thanks! Link to comment
tuanphan Posted March 19, 2023 Share Posted March 19, 2023 On 3/17/2023 at 6:54 AM, FluentStudios said: @charlieredel Did you ever figure this out? How to get nav items in a folder to underline on hover? I've tried all the suggestions in this thread and none work. Thanks! What is your site url? We can help easier 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!) 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