Evamaerketing Posted July 12, 2019 Share Posted July 12, 2019 (edited) Hi,I use the Five template and adjusted my navigation to include an icon underneath the page name. The icon is hidden, but shows on hover. I would also like it to show without hover on the active page.This is the navigation I have now (I added spaces after every < to make the tags show): < div class="navi">< div class="navitext">pagename< br>< /div>< i class="icon(through fontawesome) naviconpos">< /i>< /div> CSS settings: .navi {display: block; visibility: hidden;}.navi:hover {visibility: visible;}.navi:active {visibility: visible;}.navitext {visibility: visible;}.naviconpos {position: relative; left: 30%;} It takes the active navigation color from squarespace site style. It seems .navi:active does not do anything. I tried !important on it, but that completely offset the hidden and position settings.Thank you for any suggestions. Edited July 12, 2019 by Evamaerketing Link to comment
tuanphan Posted July 12, 2019 Share Posted July 12, 2019 (edited) @Evamaerketing Try .navi a:active i {visibility: visible !important;} Edited July 12, 2019 by tuanphan Initial Revision 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
Evamaerketing Posted July 12, 2019 Author Share Posted July 12, 2019 Thanks tuanphan. a:active is certainly a better try than mine. Unfortunately, it doesn't do anything either. Link to comment
tuanphan Posted July 12, 2019 Share Posted July 12, 2019 (edited) @Evamaerketing Can you share site url? I think i can solve with site url ;) (If you don't want to publish your site url, you can go to my profile, visit my site, and fill out the contact form in Menu Contact) Edited July 12, 2019 by tuanphan Initial Revision 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
Evamaerketing Posted July 12, 2019 Author Share Posted July 12, 2019 Thanks Tuan, I sent you an message via your contact form. I'm curious what you can do. Link to comment
Solution Evamaerketing Posted July 12, 2019 Author Solution Share Posted July 12, 2019 (edited) Tuan's second help did the trick!!! Thank you so much @tuanphan. li.page-collection.active-link i { visibility: visible;} Edited July 12, 2019 by Evamaerketing Initial Revision Link to comment
tuanphan Posted July 12, 2019 Share Posted July 12, 2019 @Evamaerketing You can post CSS, Other members will know, and they can use 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
Evadresscode Posted January 3, 2020 Share Posted January 3, 2020 (edited) Hi there, happy new year to unannounced Squarespace changes. My custom navigation titles with icons in the row below the page name which would appear on hover and active worked well for a while, but now Squarespace changed something in their underlying template. Most html tags in the navigation like <div> and <br> don't work any more. To the contrary, they really mess up the site. For the moment I could add the icons in the same line with the page name, although I would like it to be centered in the line below and without any further distinction on hover or active. Without html tags, I don't know how to customize my navigation in CSS. I add the screenshot, how I have it now and what happens if I try to add a <div> tag to the navigation title. I used this format which I then customized with CSS: < div class="v">< div class="x">pagename< br>< /div>< i class="icon(through fontawesome) np">< /i>< /div> .v { display: block; visibility: hidden; text-align: center; } .v:hover { visibility: visible; } .x { visibility: visible; } .np { position: center; } li.page-collection.active-link i { visibility: visible; } Thank you all for any hints in the right direction. Edited January 3, 2020 by Evadresscode hide logo Link to comment
tuanphan Posted January 3, 2020 Share Posted January 3, 2020 49 minutes ago, Evadresscode said: You should include link to your site. Difficult to help with only code. 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
Evadresscode Posted January 6, 2020 Share Posted January 6, 2020 (edited) I am getting closer in terms of styling, meaning getting the page name in one line and the icon in the second one and then centering both without using a < div> tag in the navigation . By using .horizontal-navigation-bar nav ul li a { padding: 1% 5% 2%; text-align: center; display: block; } I could get rid of < br> and < div class="np"> which overall makes the code a little lighter. I'm currently learning a lot. Eye opening. I have advanced as far as to learn that I did not need my ridiculous < div > tags in my navigation title, but work with squarespace's own classes. I've been pretty much able to do what I wanted with these three pieces. li.page-collection.active-link i { visibility: visible; } li.page-collection:hover i { visibility: visible; } li.page-collection i { visibility: hidden; } Now, I only have to find out how to get the icon in the second row and centered in my mobile navigation. It does not need to be hidden there. Edited January 9, 2020 by Evadresscode readability Link to comment
HannahZoe Posted January 21, 2021 Share Posted January 21, 2021 @tuanphan Hello! You always have the answers, I hope you can help me today! I am trying to achieve a similar hover effect - but in Brine. zetadesignstudio.com pw: brineintopedro I currently have icons for navigation and on hover the navigation title reveals itself. I'm doing that using this CSS .Header-nav--primary .Header-nav-item:nth-child(1), .Mobile-overlay-nav--primary .Mobile-overlay-nav-item:nth-child(1) { color: transparent !important; background-image: url('https://static1.squarespace.com/static/5f986304f5bf2b148c8de70c/t/600711aaaa01fb707b844ef9/1611076010244/crescent-moon.png'); background-repeat: no-repeat; background-size: 55px 55px; /* Size of the icon */ background-position: center; padding: 30px 30px !important; } .tweak-header-primary-nav-hover-style-spotlight .Header-nav--primary:hover .Header-nav-item:nth-child(1) { color: #31393c !important; opacity: 1; /** TRANSITIONS transition: opacity 500ms ease-in-out; -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; **/ } but I can't get the background-image to disappear, or understand how to make it disappear while ALSO leaving the title visible on hover only. Do you have any help?? 🙏 Link to comment
tuanphan Posted January 23, 2021 Share Posted January 23, 2021 On 1/22/2021 at 4:09 AM, HannahZoe said: @tuanphan Hello! You always have the answers, I hope you can help me today! I am trying to achieve a similar hover effect - but in Brine. zetadesignstudio.com pw: brineintopedro I currently have icons for navigation and on hover the navigation title reveals itself. I'm doing that using this CSS .Header-nav--primary .Header-nav-item:nth-child(1), .Mobile-overlay-nav--primary .Mobile-overlay-nav-item:nth-child(1) { color: transparent !important; background-image: url('https://static1.squarespace.com/static/5f986304f5bf2b148c8de70c/t/600711aaaa01fb707b844ef9/1611076010244/crescent-moon.png'); background-repeat: no-repeat; background-size: 55px 55px; /* Size of the icon */ background-position: center; padding: 30px 30px !important; } .tweak-header-primary-nav-hover-style-spotlight .Header-nav--primary:hover .Header-nav-item:nth-child(1) { color: #31393c !important; opacity: 1; /** TRANSITIONS transition: opacity 500ms ease-in-out; -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; **/ } but I can't get the background-image to disappear, or understand how to make it disappear while ALSO leaving the title visible on hover only. Do you have any help?? 🙏 It looks like you solved 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
HannahZoe Posted January 25, 2021 Share Posted January 25, 2021 On 1/23/2021 at 6:38 AM, tuanphan said: It looks like you solved this? @tuanphan thank you, yes I solved this! 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