loelife Posted April 26, 2022 Share Posted April 26, 2022 (edited) Site URL: https://wombat-gerbil-7tj5.squarespace.com/ PW: Ziggy445748 Hi, I know these are a lot but I'm happy with whatever solutions there are to one or any of these issues currently working on my styling for my portfolio and need help with Nav CSS (Current CSS image attached): 1. I want "Linkedin" to be colored Blue (#0072B1) 2. Folder in nav has three issues a) Dropdown box is too big. I want the box size to fit the links within b) When one of the "Other Work" pages is active, both sub-pages are highlighted red. Would like active color on on one or the other (whichever is active at the time) c) Would love a "drop-down" animation for the folder content box. Thank you! (images below) Edited April 26, 2022 by loelife Link to comment
tuanphan Posted April 29, 2022 Share Posted April 29, 2022 Hi, Add to Design > Custom CSS header#header [href*="linkedin"] { color: #0072b1; } /* Dropdown auto width */ .header-nav-folder-content { width: auto !important; min-width: unset !important; } div.header-nav-item--active a { color: black !important; } div.header-nav-folder-item--active a { color: #900 !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
loelife Posted May 3, 2022 Author Share Posted May 3, 2022 On 4/29/2022 at 5:32 AM, tuanphan said: Hi, Add to Design > Custom CSS header#header [href*="linkedin"] { color: #0072b1; } /* Dropdown auto width */ .header-nav-folder-content { width: auto !important; min-width: unset !important; } div.header-nav-item--active a { color: black !important; } div.header-nav-folder-item--active a { color: #900 !important; } Thank you! Any way to have the 'Other Works' header in active color when one of the folder items is active as well? Link to comment
tuanphan Posted May 5, 2022 Share Posted May 5, 2022 On 5/4/2022 at 3:11 AM, loelife said: Thank you! Any way to have the 'Other Works' header in active color when one of the folder items is active as well? It looks like you solved it? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
loelife Posted May 10, 2022 Author Share Posted May 10, 2022 On 5/5/2022 at 10:21 AM, tuanphan said: It looks like you solved it? Sorry for the delayed response. As of now two things happen: Either the folder items have active color individually but no main nav links will have the active color, or the main links will have active color and the folder contents with both be marked as active at the same time. If you look on the page now, the active color is working but both folder links are marked active at the same time Link to comment
tuanphan Posted May 13, 2022 Share Posted May 13, 2022 On 5/11/2022 at 12:27 AM, loelife said: Sorry for the delayed response. As of now two things happen: Either the folder items have active color individually but no main nav links will have the active color, or the main links will have active color and the folder contents with both be marked as active at the same time. If you look on the page now, the active color is working but both folder links are marked active at the same time You mean when users on this page https://wombat-gerbil-7tj5.squarespace.com/visual-design Which item will need to change color? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
loelife Posted May 13, 2022 Author Share Posted May 13, 2022 11 hours ago, tuanphan said: You mean when users on this page https://wombat-gerbil-7tj5.squarespace.com/visual-design Which item will need to change color? Thank you for the response! So When a page is active, it goes red. What I'm looking for is when the "Other Work" Page is open, I would like "Other Work" in active color as well as whichever link in the folder ("Visual design" When they are on that page or "Music" when they are on that page) if that makes sense Link to comment
tuanphan Posted May 15, 2022 Share Posted May 15, 2022 On 5/14/2022 at 2:14 AM, loelife said: Thank you for the response! So When a page is active, it goes red. What I'm looking for is when the "Other Work" Page is open, I would like "Other Work" in active color as well as whichever link in the folder ("Visual design" When they are on that page or "Music" when they are on that page) if that makes sense First, remove this code div.header-nav-item--active a { color: #ae4c4c !important; } and this .header-nav-item--active a { color: #ae4c4c !important; background-image: none !important; } and add this new code .header-nav-item--active>a, .header-nav-folder-item--active a { color: #ae4c4c !important; background-image: none !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
loelife Posted May 16, 2022 Author Share Posted May 16, 2022 On 5/15/2022 at 3:46 AM, tuanphan said: First, remove this code div.header-nav-item--active a { color: #ae4c4c !important; } and this .header-nav-item--active a { color: #ae4c4c !important; background-image: none !important; } and add this new code .header-nav-item--active>a, .header-nav-folder-item--active a { color: #ae4c4c !important; background-image: none !important; } I appreciate the help I'm still having the same issue. This is how it comes up when I'm on either the visual design page or the music page. Still trying to figure out how to have one link active and not the other while keeping "Other Work" Active. For more reference, here's the full Nav Css: /* Nav CSS */ /* change header nav active style */ .header-nav-item--active a { color: #AE4C4C !important; background-image: none !important; } header#header [href*="linkedin"] { color: #0072b1; } /* Dropdown auto width */ .header-nav-folder-content { width: auto !important; min-width: unset !important; border: 1px solid #BDBDBD; } .header-nav-item--active a { color: #ae4c4c !important; background-image: none !important; } div.header-nav-folder-item--active a { color: #900 !important; } .header-nav-item--active>a, .header-nav-folder-item--active a { color: #ae4c4c !important; background-image: none !important; } .scrollup { width: 40px; height: 40px; opacity: 0.3; position: fixed; bottom: 50px; right: 100px; display: none; text-indent: -9999px; background: url('Group 225.png') no- repeat; } .boxBorder { border: 1px solid #BDBDBD; padding: 10px; outline-offset: 5px; } Link to comment
tuanphan Posted May 20, 2022 Share Posted May 20, 2022 On 5/16/2022 at 11:49 PM, loelife said: Remove these code /* change header nav active style */ .header-nav-item--active a { color: #AE4C4C !important; background-image: none !important; } and .header-nav-item--active a { color: #ae4c4c !important; background-image: none !important; } then add code I sent above Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
loelife Posted May 20, 2022 Author Share Posted May 20, 2022 10 hours ago, tuanphan said: Remove these code /* change header nav active style */ .header-nav-item--active a { color: #AE4C4C !important; background-image: none !important; } and .header-nav-item--active a { color: #ae4c4c !important; background-image: none !important; } then add code I sent above I think we got it! Thank you so much!!! Before the code kicks in, the default black font w/ underline flashes on the nav for a second. Is that normal? Beyond that it's finally there. Thank you!! Link to comment
tuanphan Posted May 21, 2022 Share Posted May 21, 2022 6 hours ago, loelife said: I think we got it! Thank you so much!!! Before the code kicks in, the default black font w/ underline flashes on the nav for a second. Is that normal? Beyond that it's finally there. Thank you!! I think you try contacting SS Customer Care for this Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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